关于babeljs：如何使用.babelrc使babel-plugin-import适用于antd？


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

我是新来的反应者，通天塔和蚂蚁。

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

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

1
2
3
4
5
6
7
8
{
 "plugins": [
    ["import", {
     "libraryName":"antd",
     "style": true
    }]
  ]
}

我无法使其正常工作。我的Web控制台仍然显示警告：

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.

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

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

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

您需要按照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文件夹，其中包含2个针对dev / prod环境的webpack配置文件。

打开这些文件，然后按照说明页上的说明找到需要插入plugins属性的位置。

相关讨论