babel-plugin-import 插件的使用

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重启一下哈,不重启的话配置不会生效