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

Question

我是新来的反应，babel和antd。

我安装了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的底部，它说

  如果您添加库，

babel-plugin-import将无效   webpack配置供应商。

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

我在这里问了另一个问题：How to get antd working with app created via create-react-app? 也许这个问题与我通过create-react-app创建的项目有关？

Answer 1

[更新2018-02-06 ：答案仍然正确，但现在有更好的选择，即使用${CURRENT_ID}。这也在链接中记录。]

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

您应不创建ant react-app-rewired文件或类似文件。使用CRA时，所有babel配置都在webpack配置文件中处理。

首先清理您创建的配置文件，并确保已安装.babelrc。

然后弹出你的应用：babel-plugin-import

这将为您提供一个npm run eject文件夹，其中包含2个用于dev / prod环境的webpack配置文件。

打开这些文件，找到需要插入config属性的位置，如说明页中所述。