2017-06-15 13 views
2

babel-plugin-importプラグインを使用してantdパッケージをインポートしています。しかし、バンドル全体がインポートされるという警告が表示されています。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バンドルがインポートされています。

+0

antdコンポーネントをどのようにインポートしましたか? – wuxiandiejia

+0

通常の方法: 'import {Button} from 'antd'' – vijayst

+0

[babel-plugin-import doc]のwebpack config vendor.'にライブラリを追加すると、' babel-plugin-importは動作しません。 ](https://github.com/ant-design/babel-plugin-import#note)。 – wuxiandiejia

答えて

1

私は問題を把握しました。私はパッケージsearchtabular-antdを作成しました。このパッケージはbabel transpilerを使ってjavascriptを出力します。

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

これはsearchtabular-antdを使用メインアプリでantdサイズを固定次のよう

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

コンポーネントを手動LIBからインポートされるべきである:パッケージ内の以下の行は、問題を引き起こしました。

関連する問題