“babel-plugin-import”,可以将 import { } from 的形式导入的文件,按需加载并且自动引入其样式。
- 安装
npm install babel-plugin-import -dev - 配置 :在配置文件进行配置(package.json)
"babel": {
"presets": [
"react-app"
],
//-----------这段-------
"plugins": [
[
"import",
{
"libraryName": "antd",// 包名
"libraryDirectory": "es",// 目录,默认 lib
"style": true // 是否引入 style
},
"ant"
],
[
"import",
{
"libraryName": "@ant-design/icons",// 包名
"libraryDirectory": "es/icons",
"camel2DashComponentName": false // default: true,
//应该是需要加这个参数才会按大驼峰找文件,否则会默认走短横线而且 library 和文件夹名称也不一样了
},
"ant-design-icons"
]
]
//--------------------
},
- 使用:在代码中正常使用 import { } from …导入就可以,babel会自动按需导入
- 官方链接:
https://github.com/ant-design/babel-plugin-import#usage