部分导入 antd 包不起作用
Partial import of antd package not working
我正在使用 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 包。
我想通了。我创建了一个包 searchtabular-antd
。该包使用 babel 转译器输出 javascript。包中的以下行导致了问题:
import { DatePicker, Checkbox, Input, InputNumber } from 'antd';
需要手动从lib导入组件如下:
import DatePicker from 'antd/lib/date-picker';
这修复了使用 searchtabular-antd 的主应用程序中的 antd 大小。
我正在使用 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 包。
我想通了。我创建了一个包 searchtabular-antd
。该包使用 babel 转译器输出 javascript。包中的以下行导致了问题:
import { DatePicker, Checkbox, Input, InputNumber } from 'antd';
需要手动从lib导入组件如下:
import DatePicker from 'antd/lib/date-picker';
这修复了使用 searchtabular-antd 的主应用程序中的 antd 大小。