create-react-app + Typescript脚手架搭建

Posted CodeNight

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了create-react-app + Typescript脚手架搭建相关的知识,希望对你有一定的参考价值。

1、创建使用ts的新项目

yarn create react-app my-test-app --template typescript

 

2、配置tsconfig.json

(1)在根目录下新建文件tsconfig.extend.json

{
  "compilerOptions": {
    "baseUrl": "src",
    "paths": {
      "@/*": ["./*"]
    }
  }
}

  

(2)在tsconfig.json中新增
"extends": "./tsconfig.extend.json"

 

(3)允许装饰器语法

"experimentalDecorators": true

  

3、安装依赖

(1)yarn add antd

(2)安装craco以覆盖webpack配置

yarn add @craco/craco

修改package.json
"scripts": {
  "start": "craco start",
  "build": "craco build",
  "test": "craco test"
}, 

  

(3)安装其他craco插件

yarn add craco-antd

yarn add craco-less

yarn add craco-alias

(4)在根目录下新建craco.config.js文件

const CracoAntDesignPlugin = require("craco-antd");
const CracoAlias = require("craco-alias");
const CracoLessPlugin = require("craco-less");

const path = require(‘path‘);

module.exports = {
  plugins: [
    /* antd组件按需加载&样式覆盖等 */
    {
      plugin: CracoAntDesignPlugin,
      options: {
        customizeThemeLessPath: path.join(
          __dirname,
          "src/styles/antd.theme.less"
        ),
      },
    },
    /* 支持less module */
    {
      plugin: CracoLessPlugin,
      options: {
        cssLoaderOptions: {
          modules: { localIdentName: "[local]_[hash:base64:5]" },
        },
        modifyLessRule: function(lessRule, _context) {
          lessRule.test = /.(module).(less)$/;
          lessRule.exclude = path.join(__dirname, ‘node_modules‘);
          return lessRule;
        },
      },
    },
    /* 别名设置 */
    {
      plugin: CracoAlias,
      options: {
        source: "tsconfig",
        baseUrl: "./src",
        tsConfigPath: "./tsconfig.extend.json"
      }
    },
  ],
  devServer: (devServerConfig) => {
    return {
      ...devServerConfig,
      // 服务开启gzip
      compress: true,
      proxy: {
        ‘/api‘: {
          target: ‘https://dolphin-test.cootekos.com/‘,
          changeOrigin: true,
          xfwd: false,
        }
      }
    }
  }
};

(5)在react-app-env.d.ts文件中新增(否则将无法正常使用less module!!!)

/* 允许在ts中使用import styles from ‘*.less‘ */
declare module ‘*.less‘ {
  const styles: any;
  export = styles;
}

(6)安装eslint

yarn add eslint @typescript-eslint/parser @typescript-eslint/eslint-plugin eslint-config-airbnb eslint-import-resolver-typescript eslint-plugin-import eslint-plugin-jsx-a11y eslint-plugin-react eslint-plugin-react-hooks --dev

在根目录下新建.eslintrc.js

module.exports = {
  env: {
    browser: true,
    es6: true,
  },
  extends: [
    ‘plugin:react/recommended‘,
    ‘plugin:@typescript-eslint/recommended‘,
    ‘airbnb‘,
    ‘airbnb/hooks‘,
  ],
  parser: ‘@typescript-eslint/parser‘,
  parserOptions: {
    ecmaFeatures: {
      jsx: true,
      tsx: true,
      modules: true
    },
    ecmaVersion: 2020,
    sourceType: ‘module‘,
  },
  plugins: [
    ‘react‘,
    ‘@typescript-eslint‘,
  ],
  rules: {
    "react/jsx-filename-extension": [2, { "extensions": [".js", ".jsx", "ts", "tsx"] }],
    "@typescript-eslint/explicit-function-return-type": [0, { allowTypedFunctionExpressions: true }],
    "react/state-in-constructor": 0,
    "import/extensions": [2, ‘ignorePackages‘, { ts: ‘never‘, tsx: ‘never‘, json: ‘never‘, js: ‘never‘ }],
    "jsx-a11y/click-events-have-key-events": 0,
    "jsx-a11y/no-static-element-interactions": 0,
    "react/jsx-props-no-spreading": 0,
    "no-unused-expressions": 0,
    "jsx-a11y/anchor-is-valid": 0,
    "no-nested-ternary": 0,
    "react/static-property-placement": 0,
    "object-curly-newline": 0,
  },
  settings: {
    "import/resolver": {
      node: {
        extensions: [".js", ".jsx", ".ts", ".tsx"]
      },
      typescript: {
        directory: "./tsconfig.json"
      }
    },
  },
};

(7)prettier

yarn add prettier eslint-config-prettier eslint-plugin-prettier -D

在根目录下新建.prettierrc.js

module.exports =  {
  "semi": true,
  "singleQuote": true,
  "trailingComma": "es5",
  "tabWidth": 2,
  "useTabs": false  
};

修改.eslintrc.js

extends: [
    ...
    ‘prettier/@typescript-eslint‘,
    ‘plugin:prettier/recommended‘
  ],

(8)stylelint

yarn add stylelint stylelint-config-recommended stylelint-config-recess-order stylelint-config-standard -D

在根目录下新建.stylelintrc.json

{ 
  "extends": [
    "stylelint-config-recommended",
"stylelint-config-recess-order", "stylelint-config-standard" ], "rules": { "indentation": 2, "selector-pseudo-class-no-unknown": [ true, { "ignorePseudoClasses": ["global"] } ] } }

 

(9)增加pre-commit

yarn add pre-commit --dev

yarn add lint-staged --dev

修改package.json的scripts
"lint": "eslint src --fix --ext .ts,.tsx",
"lint-staged": "lint-staged"
在package.json增加
"lint-staged": {
    "**/*.{ts,tsx,less}": [
      "prettier --write"
    ],
    "**/*.{ts,tsx}": "yarn lint",
    "**/*.less": "stylelint --syntax less"
  },
"husky": {
    "hooks": {
      "pre-commit": "yarn lint-staged"
    }
  }

  

以上是关于create-react-app + Typescript脚手架搭建的主要内容,如果未能解决你的问题,请参考以下文章

create-react-app (发现不兼容的模块)

使用 create-react-app 脚手架搭建 react 项目,释放配置文件且注入 less 依赖

sh 用于将工作证书链接到create-react-app的脚本。允许您使用create-react-app和有效的SSL证书。

create-react-app:如何使用 https 而不是 http?

create-react-app + nodejs (express) 服务器

create-react-app 中的“npm run build”是啥?