如何使用 .babelrc 让 babel-plugin-import 适用于 antd？

我是 React、babel 和 antd 的新手。

我安装了 React 并使用 create-react-app 启动了一个项目。 我安装了antd（ant.design）。它建议使用 babel-plugin-import，所以我也安装了它。

如果我解释正确，babel-plugin-import 的使用文档说将其放入 .babelrc 文件中：

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

我无法让它发挥作用。我的网络控制台仍然有警告：

您使用的是antd全包，请使用https://www.npmjs.com/package/babel-plugin-import 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 https://github.com/ant-design/babel-plugin-import it says

如果您将库添加到 babel-plugin-import 将无法工作 webpack 配置供应商。

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

我在这里问了另一个问题：如何让 antd 使用通过 create-react-app 创建的应用程序？ https://stackoverflow.com/questions/44035080/how-to-get-antd-working-with-app-created-via-create-react-app也许这个问题与我通过 create-react-app 创建的项目有关？

[更新2018-02-06：答案仍然是正确的，但是现在有更好的选择，那就是使用react-app-rewired。这也记录在链接中。]

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

你应该not创建蚂蚁.babelrc文件或类似文件。使用 CRA 时，所有 babel 配置都在 webpack 配置文件内处理。

首先清理您创建的配置文件，并确保您有babel-plugin-import安装。

然后弹出您的应用程序：npm run eject

这会给你一个config包含 2 个用于开发/生产环境的 webpack 配置文件的文件夹。

打开这些文件并找到需要插入的位置plugins说明页面上记录的属性。