使用create-react-app创建好项目后
yarn add antd
第一种方法 babel-plugin-import
npm run eject
此时会提示，该命令不可逆，是否继续，输入y，这样所有配置项就都出来了。这时候也可以做一些定制化的配置了
然后 安装babel-plugin-import
yarn add babel-plugin-import
打开.babelrc，添加
{
"plugins": [
["import", {
"libraryName": "antd",
"libraryDirectory": "es",
"style": "css" // `style: true` 会加载 less 文件
}]
]
}
这种方法会暴露所有的配置文件，操作需要谨慎，可以用下面这种方法
第二种方法 react-app-rewired
引入 react-app-rewired 并修改 package.json 里的启动配置。
yarn add react-app-rewired customize-cra
&1 修改package.json
/* package.json */
"scripts": {
- "start": "react-scripts start",
+ "start": "react-app-rewired start",
- "build": "react-scripts build",
+ "build": "react-app-rewired build",
- "test": "react-scripts test",
+ "test": "react-app-rewired test",
}
&2 然后在项目根目录创建一个 config-overrides.js 用于修改默认配置。
module.exports = function override(config, env) {
// do stuff with the webpack config...
return config;
};
此时就实现按需加载了，
然后只需从 antd 引入模块即可，无需单独引入样式。
import { DatePicker } from 'antd';
如果想使用babel-plugin-import又不想npm run eject暴露所有配置文件，可以同时安装babel-plugin-import和react-app-rewired，然后执行上面的&1&2方法，并修改 *config-overrides.js内容为
+ const { override, fixBabelImports } = require('customize-cra');
- module.exports = function override(config, env) {
- // do stuff with the webpack config...
- return config;
- };
+ module.exports = override(
+ fixBabelImports('import', {
+ libraryName: 'antd',
+ libraryDirectory: 'es',
+ style: 'css',
+ }),
+ );
最后重启 yarn start
