如何使用 .babelrc 使 babel-plugin-import 为 antd 工作? [英] How do I use .babelrc to get babel-plugin-import working for antd?

问题描述

我是 react、babel 和 antd 的新手.

I'm new to react, babel, and antd.

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

I installed react and started a project using create-react-app. I installed antd (ant.design). It suggests using babel-plugin-import, so I installed that too.

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

If I interpret it right, the usage documentation for babel-plugin-import says to put this in a .babelrc file:

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

我无法使用它.我的网络控制台仍然有警告:

I'm having trouble getting it to work. My web console still has the warning:

您使用的是一整套antd，请使用https://www.npmjs.com/package/babel-plugin-import减少应用程序包尺寸.

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 中创建了一个，但这也不起作用.

I didn't have a .babelrc file in my project's directory, so I created one with the above contents and restarted my server (npm start). That didn't work, so I created one in myProject/node_modules/babel_plugin_import but that doesn't work either.

那个代码片段应该去哪里?

Where is that code snippet supposed to go?

在https://github.com/ant-design/babel-底部插件导入它说

如果你添加库，babel-plugin-import 将无法工作webpack 配置供应商.

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

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

But I don't know what that means.

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

I asked another question here: How to get antd working with app created via create-react-app? Maybe this problem has something to do with my project created via create-react-app??

推荐答案

[Update 2018-02-06: 答案还是正确的，但是现在有更好的选择，就是使用react-app-rewired.这也记录在链接中.]

[Update 2018-02-06: The answer is still correct, but there is a better alternative now, which is to use react-app-rewired. This is also documented in the link.]

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

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

You should not create ant .babelrc files or similar. When using CRA all babel config is handled inside the webpack config files.

首先清理你创建的配置文件，并确保你已经安装了babel-plugin-import.

First clean up the config files you created, and make sure you have babel-plugin-import installed.

然后弹出你的应用:npm run eject

这将为您提供一个 config 文件夹，其中包含 2 个用于开发/生产环境的 webpack 配置文件.

This will give you a config folder with 2 webpack config files for dev/prod environments.

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

Open those files and locate the place where you need to insert the plugins property as documented on the instructions page.

这篇关于如何使用 .babelrc 使 babel-plugin-import 为 antd 工作?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！