1. 使用 create-react-app 初始化

# 使用了 create-react-app 的 typescript 模板 yarn create react-app my-big-screen --template typescript # 初始化之后进入 my-big-screen 文件目录下执行 yarn start # localhost:3000 就能看到 react 的 hello 页面了

2. 引入 antd UI库

# 在 根目录 下 yarn add antd

3. 使用 craco 插件来自定义配置

1. 安装 craco

yarn add @craco/craco

2. 修改 package.json 文件如下

   # 原本 "scripts": { "start": "react-scripts start", "build": "react-scripts build", "test": "react-scripts test", "eject": "react-scripts eject" } # 修改之后 "scripts": { "start": "craco start", "build": "craco build", "test": "craco test", "eject": "craco eject" }

3. 在根目录添加 craco.config.js 文件

   module.exports = {}

4. 自定义 antd 主题，使用 less 作为 css 预处理器

1. 安装 craco-antd

yarn add craco-antd

2. 修改 craco.config.js 文件

   const CracoAntDesignPlugin = require('craco-antd'); module.exports = { plugins: [ { plugin: CracoAntDesignPlugin, options: { customizeTheme: { '@primary-color': '#1DA57A', }, }, }, ], };

5. 使用 craco-less .module.less 来模拟vue组件中style 的 scope 功能

1. craco-less 依赖 已经内置在 @craco/craco 依赖中，无需主动安装

2. 配置 craco.config.js 文件

   const CracoAntDesignPlugin = require('craco-antd') const CracoLessPlugin = require('craco-less') const { loaderByName } = require('@craco/craco') module.exports = { plugins: [ { plugin: CracoAntDesignPlugin, options: { customizeTheme: { '@primary-color': '#1DA57A' } } }, { plugin: CracoLessPlugin, options: { modifyLessRule(lessRule, context) { // You have to exclude these file suffixes first, // if you want to modify the less module's suffix lessRule.exclude = /\.m\.less$/ return lessRule }, modifyLessModuleRule(lessModuleRule, context) { // Configure the file suffix lessModuleRule.test = /\.m\.less$/ // Configure the generated local ident name. const cssLoader = lessModuleRule.use.find(loaderByName('css-loader')) cssLoader.options.modules = { localIdentName: '[local]_[hash:base64:5]' } return lessModuleRule } } } ] }

3. 配置 * ./src/react-app-env.d.ts * 文件

   /// <reference types="react-scripts" /> // 定义在 全局的 变量 然后就可以 window.* 进行访问了 interface Window { __REDUX_DEVTOOLS_EXTENSION_COMPOSE__: any AMap: any } declare module "*.module.less" { const classes: { readonly [key: string]: string }; export default classes; }

4. 使用示例(类似vue scope 的效果)

   # index.module.less 文件命名 app { font-size: 40px; color: #f00; }

   # 在组件中引入 import styles from './index.module.less' <div className={styles['app']}>hello</div>

6. 使用 ESLint Prettier 两个插件来做代码格式校验和自动格式化

7. 以上操作版本记录

{ "name": "xxx", "version": "0.1.0", "private": true, "dependencies": { "@craco/craco": "^6.2.0", "@testing-library/jest-dom": "^5.11.4", "@testing-library/react": "^11.1.0", "@testing-library/user-event": "^12.1.10", "@types/jest": "^26.0.15", "@types/node": "^12.0.0", "@types/react": "^17.0.0", "@types/react-dom": "^17.0.0", "@types/react-router-dom": "^5.1.8", "@typescript-eslint/eslint-plugin": "^4.30.0", "@typescript-eslint/parser": "^4.30.0", "antd": "^4.16.13", "craco-antd": "^1.19.0", "eslint": "^7.32.0", "eslint-config-alloy": "^4.3.0", "eslint-loader": "^4.0.2", "eslint-plugin-react": "^7.25.1", "react": "^17.0.2", "react-dom": "^17.0.2", "react-redux": "^7.2.4", "react-router-dom": "^5.2.1", "react-scripts": "4.0.3", "typescript": "^4.1.2", "web-vitals": "^1.0.1" }, "scripts": { "start": "set PORT=3090 && craco start", "build": "craco build", "test": "craco test", "eject": "craco eject", "lint": "eslint '{src}*.{ts,tsx,js,jsx}'", "lint_fix": "eslint {src} --ext .ts,.tsx,.js,jsx --fix" }, "browserslist": { "production": [ ">0.2%", "not dead", "not op_mini all" ], "development": [ "last 1 chrome version", "last 1 firefox version", "last 1 safari version" ] } }