0

私はかなり長い間 Webpack を学んでいますが、奇妙な動作に遭遇しました。

angular.io のWebpack Introduction で説明されているように、 すべてのベンダー モジュールをvendor.ts-file にインポートし、すべてのポリフィルを -file にインポートし、polyfill.ts-file 内でアプリを初期化していますmain.ts。したがって、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 はそれを認識しvendor.ts、app.ts共通のモジュールを使用して、それをvendor.js-file のみに追加する必要があります。-file は次のvendor.tsようになります。

// 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。この例では、 -fileとの依存関係も共有する必要がありますが、 -module もそこにインポートするため、そこにwebfontloader書き込まれます。app.jsvendor.ts

// 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');それは機能します。

どうしたの？それでは、角度のすべてのインポートが機能するのはなぜですか?

4

1 に答える 1

0

vendor.ts で Angular インポートと同じ構文を使用します。たとえば、import 'webfontloader'代わりにimport * as動作するようです。期待どおり、すべてが vendor.js になります。正直なところ、なぜそのように機能するのかという技術的なことはわかりません。

于 2016-10-10T06:54:57.390 に答える