2016-08-17 7 views
0

私はかなり長い間Webpackを勉強していて、奇妙な振る舞いをしていました。WebpackのCommonsChunkPluginと "import * as"の使用

Webpack Introduction on angular.io で説明したように、私はpolyfill.ts -fileに、​​-fileにすべてのpolyfillsをすべての私のベンダーのモジュールをインポートし、main.ts -file以内に私のアプリを初期化しています。 したがって、私はWebPACKのための私の設定では、次のエントリポイントとCommonsChunkPluginを追加しました:

// webpack.config.js --> 

entry: { 
    'polyfill': './src/polyfill.ts', 
    'vendor': './src/vendor.ts', 
    'app': './src/main.ts' 
} 

// ... 

new Webpack.optimize.CommonsChunkPlugin({ 
    name: ['app', 'vendor', 'polyfill'] 
}) 

をその結果、WebPACKのは​​とapp.tsが使用中の共通のモジュールを持っていることを認識し、のみvendor.js -fileに追加する必要があります。​​-fileは次のようになりん:

// vendor.ts --> 

// Angular 2. 
import '@angular/platform-browser'; 

// ... 

import '@angular/router'; 

// RxJS. 
import 'rxjs'; 

// Web Font Loader. 
import * as WebFont from 'webfontloader'; 

// Font Awesome. 
import '../node_modules/font-awesome/css/font-awesome.css'; 

残念ながら、この動作は、私がimport MODULE経由でインポートされたすべてのモジュールで期待通りに動作しますが、私はimport * as ALIAS from MODULEを経由して輸入したモジュールでは動作しません。この例ではwebfontloaderモジュールはapp.jsに書き込まれていますが、そこにもインポートされますが、​​ファイルとの共有依存関係も必要です。

// app.ts --> 
// Initialize Angular. 
platformBrowserDynamic().bootstrapModule(AppModule); 

// Load Fonts. 
WebFont.load({ 
    google: { 
     families: ['Lato:400,700'] 
    } 
}); 

私はそれが仕事をしimport * as WebFont from 'webfontloader';let WebFont = require('webfontloader');に変更

どういうところが間違っていますか?それでは、なぜすべての輸入角度が働いているのですか?

答えて

0

Angularインポートと同じ構文をvendor.tsに使用します(例:import 'webfontloader'の代わりにimport * as)。すべてがvendor.jsで期待通りに終わってしまいます。正直言って私はそれがなぜそれのように機能するのかの技術を知らない。

関連する問題