如何使用.babelrc来为antd使用babel-plugin-import? [英] How do I use .babelrc to get babel-plugin-import working for 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
    }]
  ]
}

我无法正常工作.我的Web控制台仍然显示警告:

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??

推荐答案

[更新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

Then eject your app: 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来为antd使用babel-plugin-import?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！