部分导入antd包不起作用

时间:2017-06-15 09:08:32

标签: webpack babel antd

我正在使用babel-plugin-import插件导入antd包。但是,我收到警告说整个捆绑包已导入。

  

您正在使用整包的antd,请使用   https://www.npmjs.com/package/babel-plugin-import减少应用包   大小

我对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包。

1 个答案:

答案 0 :(得分:1)

我弄明白了这个问题。我创建了一个包searchtabular-antd。该软件包使用babel transpiler输出javascript。包中的以下行引起了问题:

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

应该从lib手动导入组件,如下所示:

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

这修复了使用searchtabular-antd的主app中的antd大小。