babel-plugin-import是一款babel插件,在编译过程中将import的写法自动转换成按需引入的方式.
今天在使用react 的组件库ant-ui时候,想要引入babel-plugin-import插件实现按需加载,按照官网教程发现样式怎么都引入不进去.
记录一下自己的过程.
安装插件
npm install babel-plugin-import --save-dev
ant-ui 上说我们可以在.babelrc or babel-loader option设置,这里我的配置是写在.babelrc里面的.
官网的写法是:
{
"plugins": [
["import", {
"libraryName": "antd",
"libraryDirectory": "es",
"style": "css" // `style: true` 会加载 less 文件
}]
]
}
我按照这个写法配置在.babelrc之后,发现样式始终引不进去.查看官网发现原来是"libraryDirectory":"es"这里的问题,这里面默认是lib,我们需要把"es"换成"lib"即可.
下面给大家附上我.babelrc里面的代码,供大家参考.
{
"presets": ["react","es2015"],
"plugins": [
[
"import",
{
"libraryName": "antd",
"libraryDirectory": "lib",
"style": "css"
}
]
]
}
另外给大家贴出babel-plugin-import插件的地址
https://github.com/ant-design/babel-plugin-import
这是官网上的截图
还有大家修改完配置文件记得一定要npm start重启一下哈,不重启的话配置不会生效