0

我学习 Webpack 已经有一段时间了，遇到了一个奇怪的行为。

如angular.io 上的 Webpack 介绍中所述， 我将所有供应商模块导入vendor.ts-file，所有 polyfills 导入polyfill.ts-file 并在 -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 中。vendor.ts-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-module 被写入app.js，因为我也在那里导入它，尽管它也应该与vendor.ts-file 共享依赖关系。

// 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 回答