本文仅记录搭建项目过程，如果觉得每次自己搭建太麻烦，可以直接用我开源的cli工具~gorgeous-admin-cli

一、项目初始化

1、初始化

npx create-react-app app-name --template typescript

2、使用craco配置webpack，无需eject

安装：

npm i @craco/craco -S

根目录创建craco.config.js

const path = require('path')

const pathResolve = pathUrl => path.join(__dirname, pathUrl)

module.exports = {
  webpack: {
    alias: {
      '@': pathResolve('src'), // 配置@ （同时还要配置tsconfig，如下）
    }
  },
  babel: {
    plugins: [
      ['import', { libraryName: 'antd', style: true }],
      ['@babel/plugin-proposal-decorators', { legacy: true }]
    ]
  },
  plugins: []
}

package.json将scripts中改为：

  "scripts": {
    "start": "craco start",
    "build": "craco build"
  },

tsconfig添加：

  "extends": "./tsconfig.extend.json",

根目录创建tsconfig.extend.json，内容如下：

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

3、eslint

eslint --init

然后需要安装一些eslint插件：

eslint-config-airbnb-typescript
eslint-config-prettier
prettier
eslint-plugin-prettier
eslint-import-resolver-alias
eslint-import-resolver-typescript
babel-plugin-import

npm i eslint-config-airbnb-typescript eslint-config-prettier prettier eslint-plugin-prettier eslint-import-resolver-alias eslint-import-resolver-typescript babel-plugin-import -D

eslint配置：

module.exports = {
  env: {
    browser: true,
    es2021: true,
  },
  globals: {
    JSX: true,
  },
  extends: [
    'airbnb-typescript',
    'airbnb/hooks',
    'plugin:@typescript-eslint/recommended',
    'prettier',
    'plugin:prettier/recommended',
  ],
  parser: '@typescript-eslint/parser',
  parserOptions: {
    ecmaFeatures: {
      jsx: true,
      tsx: true,
      modules: true,
    },
    ecmaVersion: 2020,
    sourceType: 'module',
    project: './tsconfig.json',
  },
  plugins: ['react', '@typescript-eslint'],
  settings: {
    'import/resolver': {
      alias: {
        map: [['@', './src/']],
      },
      node: {
        extensions: ['.js', '.jsx', '.ts', '.tsx'],
      },
      typescript: {
        project: './tsconfig.json',
      },
    },
  },
  rules: {
    'react/jsx-filename-extension': [
      2,
      {
        extensions: ['.js', '.jsx', '.ts', '.tsx'],
      },
    ],
    'import/extensions': [
      'error',
      'ignorePackages',
      {
        js: 'never',
        ts: 'never',
        jsx: 'never',
        tsx: 'never',
      },
    ],
    'max-len': [0],
    'react/jsx-one-expression-per-line': 0,
    'react/state-in-constructor': 0,
    'react/self-closing-comp': 0,
    'react/prefer-stateless-function': 0,
    'react/static-property-placement': 0,
    'max-classes-per-file': 0,
    'react/sort-comp': 0,
    'jsx-a11y/no-noninteractive-element-interactions': 0,
    'jsx-a11y/click-events-have-key-events': 0,
    'jsx-a11y/control-has-associated-label': 0,
    'jsx-a11y/anchor-has-content': 0,
    'react/no-unused-state': 0,
    'jsx-a11y/anchor-is-valid': 0,
    'no-plusplus': 0,
    'jsx-a11y/no-static-element-interactions': 0,
    'jsx-a11y/alt-text': 0,
    'class-methods-use-this': 0,
    'import/prefer-default-export': 0,
    'no-console': 0,
    'react/jsx-props-no-spreading': 0,
    'no-param-reassign': 0,
    'no-shadow': 0,
    'jsx-a11y/media-has-caption': 0,
    'import/no-unresolved': [2, { ignore: ['react', 'react-dom'] }],
    semi: ['error', 'never'],
    'prettier/prettier': ['error', { semi: false, singleQuote: true }],
    '@typescript-eslint/no-empty-function': 'off',
  },
}

可以配置eslintignore，类似于gitignore

4、使用react scoped css

npm install craco-plugin-scoped-css --save

在craco.config.js中添加：

...
plugins: [
    {
      plugin: require('craco-plugin-scoped-css'),
    },
  ],
...

根据eslint把报错改掉即可npm start

5、使用env-cmd配置环境变量

安装：

npm i env-cmd -D

修改package.json启动命令

"scripts": {
    "start": "env-cmd -e development craco start",
    "build": "env-cmd -e production craco build"
  },

创建.env-cmdrc.js，内容如下

module.exports = {
  development: {
    REACT_APP_API_HOST: 'https://development.xxx.com'
  },
  production: {
    REACT_APP_API_HOST: 'https://production.xxx.com'
  }
}

---

二、整体框架