babel-import-plugin 无法解决关于使用整个 antd 包的警告。 Antd 错误或 babel 导入插件使用不正确？答案

【问题标题】：Warning about using a whole package of antd is not resolved with babel-import-plugin. Antd bug or incorect usage of babel import plugin?babel-import-plugin 无法解决关于使用整个 antd 包的警告。 Antd 错误或 babel 导入插件使用不正确？
【发布时间】：2021-05-05 20:21:39
【问题描述】：

当我尝试在 ant design 中使用 react 进行这样的导入时

 import {UserOutlined, LockOutlined} from '@ant-design/icons'

我收到下一个警告

"You are using a whole package of antd, please use
https://www.npmjs.com/package/babel-plugin-import 
to reduce app bundle size warning or what wrong with my babelrc?"

我尝试使用气泡导入插件修复它，但它不起作用
也许我用错了？

*在客户端文件夹中我有反应应用程序和package.json - 用于导入的 babel 插件以及带有下一个设置的 babelrc 配置

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

【问题讨论】：

标签： reactjs antd ant-design-pro

【解决方案1】：

在我的情况下，通过升级到新的 antd 版本 - 4.14.0 解决了问题。然后警告消失了。还要检查，如果您的项目根目录中有 .babelrc 文件（package.json 文件所在的位置）

【讨论】：

我能够试验两个运行 CRA v4 的反应应用程序。安装 babel-import 插件，并没有删除项目 1 的警告，直到我们从 4.11.2 升级到 4.16.1。在项目2中，我刚刚将antd升级到4.16.1，警告也消失了，没有安装插件。关于...

【解决方案2】：

我不知道它是如何工作的，但是为什么和设计没有在文档上描述这个，但是我的解决方案在这里找到了 https://github.com/PW486/react-antd-boilerplate 启动应用时只使用“react-app-rewired”

【讨论】：

【解决方案3】：

我意识到问题至少在我的情况下是我以不同的方式导入组件：

这清除了警告：

import { Layout } from "antd"

这导致显示警告：

import { Layout } from "antd/lib"

【讨论】：