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

Question

我是react，babel和antd的新手。

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

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

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

我很难让它工作。我的网络控制台仍然有警告:

You are using a whole package of antd, please use https://www.npmjs.com/package/babel-plugin-import to reduce app bundle size.

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

该代码片段应该去哪里？

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

babel-plugin-import will be not working if you add the library in webpack config vender.

但我不知道那是什么意思。

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

Answer 1

[ 2018 年 2 月 6 日更新 : 答案还是正确的，不过现在有更好的选择，就是使用react-app-rewired .这也记录在链接中。]
您需要按照 https://ant.design/docs/react/use-with-create-react-app#Import-on-demand 中的说明进行操作到一个 T。
你应该 不是 创建 Ant .babelrc文件或类似文件。使用 CRA 时，所有 babel 配置都在 webpack 配置文件中处理。
首先清理您创建的配置文件，并确保您有 babel-plugin-import安装。
然后弹出您的应用程序:npm run eject这会给你一个 config包含 2 个用于 dev/prod 环境的 webpack 配置文件的文件夹。
打开这些文件并找到需要插入 plugins 的位置说明页面上记录的属性。