本文仅记录搭建项目过程，如果觉得每次自己搭建太麻烦，可以直接用我开源的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'
}
}
