为什么Webpack打包成'System.register'形式

Question

我在尝试使用Webpack开发一个Angular2应用，然而在浏览器控制台中出现了一个错误：Uncaught ReferenceError: System is not defined。

查看打包后的js文件时，我发现它使用了以下代码：

function(module, exports) {

    System.register(['angular2/platform/browser', './app.component'], function(exports_1) {
        var browser_1, app_component_1;
        return {
            setters:[
                function (browser_1_1) {
                    browser_1 = browser_1_1;
                },
                function (app_component_1_1) {
                    app_component_1 = app_component_1_1;
                }],
            execute: function() {
                browser_1.bootstrap(app_component_1.AppComponent);
            }
        }
    });
    // ...

我的 webpack.config.js 很简单，如下：

var webpack = require('webpack');

module.exports = {
    context: __dirname,
    entry: "./app/boot.ts",
    devtool: 'inline-sourcemap',

    output: {
        path: __dirname + "/dist",
        filename: "bundle.js"
    },

    module: {
        loaders: [
            {test: /\.ts$/, loader: 'ts-loader'}
        ]

    }
};

有人可以帮我修理吗？谢谢。

- Ron

---

如果你使用 webpack 的话，你应该将你的代码转译成 commonjs。前往你的 tsconfig.json 文件，并把 module 改为 commonjs。 - Eric Martinez

Eric，你救了我。你能回答一下吗？我会标记它的。 - Ron

Answer 1

正如@Ron所建议的那样

如果您正在使用Webpack来打包应用程序，则必须将代码转换为commonjs。 解决方案是在tsconfig.json中将module更改为commonjs。

// tsconfig.json
"module" : "commonjs"

以下是使用Webpack的Angular 2种子存储库列表，可能会有所帮助：

• ng2-webpack-play 由 @pkozlowski-opensource 创建
• angular2-webpack-starter 由 @gdi2290 创建
• ng2-webpack 由 @ocombe 创建

另外，我推荐您观看 AngularConnect2015 中 Pawel 的 Angular2 应用程序的模块化和打包 视频。

- Eric Martinez

---

对我没有帮助。 - avagrkjllkjfdser3