0

我按照antd-mobile 使用链接中的说明使用 babel-plugin-import 导入 antd-mobile，但是当我使用格式的导入时：

import {Card as CardMobile, WhiteSpace} from 'antd-mobile';

此警告仍然出现在浏览器控制台日志中：

You are using a whole package of antd-mobile, please use https://www.npmjs.com/package/babel- 
plugin-import to reduce app bundle size.

我可以通过使用手动导入引用来解决警告：

import WhiteSpace from 'antd-mobile/lib/white-space';
import 'antd-mobile/lib/white-space/style/css';
import CardMobile from 'antd-mobile/lib/card';
import 'antd-mobile/lib/card/style/css';

但我希望使用不那么冗长的非手动形式。

这是 .babelrc 中的插件配置设置：

  "plugins": [
    "@babel/proposal-class-properties",
    "@babel/plugin-syntax-dynamic-import",
    "@babel/transform-runtime",
    ["import", { "libraryName": "antd", "libraryDirectory": "lib"}, "antd"],
    ["import", { "libraryName": "antd-mobile", "libraryDirectory": "lib"}, "antd-mobile"],
    ["babel-plugin-webpack-alias", { "config": "./webpack.config.common.js" }]
  ],

以下是 package.json 中的一些包版本（如果需要任何其他包版本，请告诉我）：

"antd-mobile": "2.3.4",
"babel-plugin-import": "1.11.2",
"@babel/core": "7.2.2",
4

2 回答 2

0

使用模块化的 antd-mobile从 antd-mobile 网站上提到它是如何工作的？

转到目标页面，你会看到（抱歉我暂时不能直接发布图片）：

截图，点击查看

你可能仍在使用webpack@1.x或者有错误的 webpack 配置，它不能支持摇树。

于 2021-04-10T02:19:51.630 回答
0 
import {Card as CardMobile, WhiteSpace} from 'antd-mobile';

在这里，您正在访问整个包。我们需要把它分解。

import Card as CardMobile from 'antd-mobile/Card';
import WhiteSpace from 'antd-mobile/WhiteSpace';

现在我们只导入特定的东西，我们将在文件中使用的东西。

于 2021-04-09T17:27:05.450 回答