React配置
Yu Lei 2019-7-27
React
React配置
使用 create-react-app demo-react-02 创建一个项目
安装插件
yarn add less less-loader antd babel-plugin-import axios react-app-rewired customize-cra @babel/plugin-proposal-decorators
# babel-plugin-import 动态导入 react-app-rewired customize-cra 覆盖配置文件
1
2
2
创建文件 config-overrides.js
const { override, addDecoratorsLegacy, fixBabelImports, addLessLoader } = require('customize-cra')
module.exports = override(
addDecoratorsLegacy(), //装饰器模式
fixBabelImports('import', {
//引入antd简化
libraryName: 'antd',
libraryDirectory: 'es',
//style: 'css',
style: true //使用less
}),
addLessLoader({
//配置less
javascriptEnabled: true,
modifyVars: { '@primary-color': '#1DA57A' } //配置主题
})
)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
package 中修改 scripts
"scripts": {
"start": "react-app-rewired start",
"build": "react-app-rewired build",
"test": "react-app-rewired test",
"eject": "react-scripts eject"
}
1
2
3
4
5
6
2
3
4
5
6