如何使用.babelrc让babel-plugin-import为antd工作？

Question

我是新来的反应,巴贝尔和蚂蚁.

我安装了react并使用create-react-app启动了一个项目.我安装了antd(ant.design).它建议使用babel-plugin-import,所以我也安装了它.

如果我解释正确,babel-plugin-import的使用文档说将它放在.babelrc文件中:

{
  "plugins": [
    ["import", {
      "libraryName": "antd",
      "style": true
    }]
  ]
}

我无法让它上​​班.我的Web控制台仍然有警告:

您正在使用整个antd包,请使用 https://www.npmjs.com/package/babel-plugin-import来减少应用包大小.

我的项目目录中没有.babelrc文件,因此我创建了一个包含上述内容并重新启动我的服务器(npm start).这不起作用,所以我在myProject/node_modules/babel_plugin_import中创建了一个,但这也不起作用.

该代码片段应该去哪里？

在https://github.com/ant-design/babel-plugin-import的底部,它说

如果您在webpack配置供应商中添加库,则babel-plugin-import将无法正常工作.

但我不知道这意味着什么.

我在这里问了另一个问题:如何让antd使用通过create-react-app创建的应用程序？ 也许这个问题与我通过create-react-app创建的项目有关？

Answer 1

[ 更新2018-02-06:答案仍然正确,但现在有一个更好的选择,即使用react-app-rewired.这也在链接中记录.]

您需要按照https://ant.design/docs/react/use-with-create-react-app#Import-on-demand中的说明操作.

你应该不是创建蚂蚁.babelrc文件或相似.使用CRA时,所有babel配置都在webpack配置文件中处理.

首先清理您创建的配置文件,并确保已babel-plugin-import安装.

然后弹出你的app: npm run eject

这将为您提供一个config包含2个用于dev/prod环境的webpack配置文件的文件夹.

打开这些文件,找到需要插入plugins属性的位置,如说明页面中所述.