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 插件来自定义配置
- 安装 craco
yarn add @craco/craco
-
修改 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" }
-
在根目录添加 craco.config.js 文件
module.exports = {}
4. 自定义 antd 主题，使用 less 作为 css 预处理器
- 安装 craco-antd
yarn add craco-antd
-
修改 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 功能
craco-less 依赖 已经内置在 @craco/craco 依赖中，无需主动安装
-
配置 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 } } } ] }
-
配置 * ./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; }
-
使用示例(类似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 两个插件来做代码格式校验和自动格式化
具体操作参考： //www.greatytc.com/p/d37f54dc091b
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"
]
}
}
