下图是antd官网给的按需加载方式,虽然就这么两行字,却花了我半天的时间实现,真的心累
我的react项目是使用create-react-app脚手架创建的 主要有两个原因:
1:不知道.babelrc在哪
2:不知道babel-loader option在哪
查了半天资料,后来发现: .
babelrc存在于src根目录下,需要手动创建,
babel-loader option在配置文件webpack.config.js里面
正题开始
方式一:使用.babelrc
1、安装依赖npm install babel-plugin-import -save , 在src目录下面创建.babelrc文件
2、将官网的那段代码干过来就行
{
"plugins": [
[
"import",
{
"libraryName": "antd",
"libraryDirectory": "es",
"style": "css" // `style: true` 会加载 less 文件
}
]
],
}
3、运行之后如果不出意外,会报下图错误,大概意思就是说在package.json和.babelrc
都有babel的配置,需要移除一个
这样的话我觉得,可能把.babelrc 里面的代码直接加到package.json babel配置里面可能也能生效,我没尝试过,有兴趣的可以尝试一波
4、然后我就去package.json里面看了一下,在最下面看到了如下的babel配置,然后
我就把package.json里面的下图代码删掉了,并将presets移到了.babelrc文件里
5、最终实现配置如下
{
"plugins": [
[
"import",
{
"libraryName": "antd",
"libraryDirectory": "es",
"style": "css" // `style: true` 会加载 less 文件
}
]
],
"presets": [
"react-app"
]
}
方式二:使用babel-loader option
1、 安装依赖npm install babel-plugin-import -save执行npm run eject,将配置文件暴露出来
注意: 此操作是不可逆的,他会暴露创建react时候的webpack的配置,而且这个命令只能在 刚刚使用
脚手架创建好项目之后运行(文件的结构不能发生改变的时候才能暴露)
2、进入webpack.config.js文件,找到配置babel的位置
3、将下面代码干到指定位置即可
["import", {
libraryName: "antd",
libraryDirectory: "es",
style: 'css' // `style: true` 会加载 less 文件
}]
方式三:使用react-app-rewired(网上比较推荐这个)
1、安装依赖 yarn add react-app-rewired customize-cra babel-plugin-import
一次安装三个,也可以分开安装。
如果安装失败,可以尝试给react-app-rewired指定版本,也可以尝试执行一下npm install
2、然后进入到package.json修改scripts
"scripts": {
"start": "react-app-rewired start",
"build": "react-app-rewired build",
"test": "react-app-rewired test"
},
3、在项目应用的根目录下src创建config-overrides.js文件,代码如下:
const { override, fixBabelImports } = require('customize-cra');
module.exports = override(
fixBabelImports('import', {
libraryName: 'antd',
libraryDirectory: 'es',
style: true,
})
)
这种方式官网有比较详细的教程