Antd-mobile发出警告：“你正在使用一个完整的antd-mobile包”

Question

我按照antd-mobile usage link中的说明使用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",

Answer 1

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

在这里，您可以访问整个包。我们得把它分成两部分。

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

现在我们只导入特定的内容，我们将在文件中使用这些内容。

Answer 2

来自移动网站antd How does it work?的Use modularized antd-mobile

转到target page，你会看到(抱歉，我现在不能直接发布图片)：

snapshot, click to check out

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