我如何使用 .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.

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

我在这里问了另一个问题：也许这个问题与我通过create-react-app创建的项目有关？？

Answer 1

[2018-02-06更新：答案还是正确的，但是现在有更好的选择，就是使用react-app-rewired。 link.]

中也记录了这一点

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

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

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

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

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

打开这些文件并找到您需要插入 plugins 属性的位置，如说明页面上所述。

Answer 2

只需添加 babel-plugin-import 文档所说的内容，但请记住，如果您使用的是 CRA，则不能在不弹出项目的情况下直接更改 babel 配置。

如果不想弹出，可以使用@craco/craco，把babel配置放在里面，像这样：

/* craco.config.js */

module.exports = {
  babel: {
    presets: [],
    plugins: [
      [
        "import",
        {
          libraryName: "antd",
          style: true, // or 'css'
        },
      ],
    ],
    loaderOptions: {
      /* Any babel-loader configuration options: https://github.com/babel/babel-loader. */
    },
  },
};

不要忘记更改您的脚本（在 craco 文档中有更多详细信息）：

/* package.json */

"scripts": {
-   "start": "react-scripts start",
+   "start": "craco start",
-   "build": "react-scripts build",
+   "build": "craco build"
-   "test": "react-scripts test",
+   "test": "craco test"
}

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

How do I use .babelrc to get babel-plugin-import working for antd?

babeljs

create-react-app

antd