webpack - 部分导入 antd 包不起作用

Question

我正在使用 babel-plugin-import 插件导入 antd 包。但是，我收到了整个包已导入的警告。

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

我的 jsx webpack 配置如下:

{
    test: /\.jsx$/,
    loader: 'babel-loader',
    exclude: [nodeModulesDir],
    options: {
        cacheDirectory: true,
        plugins: [
            'transform-decorators-legacy',
            'add-module-exports',
            ["import", { "libraryName": "antd", "style": true }],
            ["react-transform", {
                transforms: [
                    {
                        transform: 'react-transform-hmr',
                        imports: ['react'],
                        locals: ['module']
                    }
                ]
            }]
        ],
        presets: ['es2015', 'stage-0', 'react']
    }
},

由于某种原因，整个 antd 包正在被导入。

Answer 1

我发现了问题所在。我创建了一个包searchtabular-antd。该包使用 babel transpiler 来输出 javascript。包中的以下行导致了问题:

import { DatePicker, Checkbox, Input, InputNumber } from 'antd'; 

应按如下方式从 lib 手动导入组件:

import DatePicker from 'antd/lib/date-picker';

这修复了使用 searchtabular-antd 的主应用程序中的 antd 大小。