为什么将Webpack捆绑为"System.register" [英] Why webpack bundled as 'System.register'

问题描述

我正在尝试使用webpack开发angular2应用，但最终在浏览器控制台中显示错误:Uncaught ReferenceError:未定义系统.

当我查看捆绑的js时，发现它正在使用System.register，如下所示:

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.

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

以下是使用webpack的angular2种子存储库列表，

• ng2-webpack-play @ pkozlowski-opensource
• angular2-webpack-starter 通过@ gdi2290
• ng2-webpack @ocombe

另外，我建议您观看AngularConnect2015的Pawel撰写的 Angular2应用程序的模块化和打包 >

I am trying develop a angular2 app using webpack, but it end up with an error in browser console say: Uncaught ReferenceError: System is not defined.

When I looked into the bundled js, I saw it is using System.register like below:

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);
            }
        }
    });
    // ...

My webpack.config.js is pretty simple as below:

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'}
        ]

    }
};

Can anyone fix for me? thanks.

解决方案

As suggested by @Ron

If you're using Webpack to bundle your application you must transpile your code to commonjs. The solution is to change module to commonjs in your tsconfig.json.

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

Here's a list of seed repositories for angular2 using webpack that can be helpful

• ng2-webpack-play by @pkozlowski-opensource
• angular2-webpack-starter by @gdi2290
• ng2-webpack by @ocombe

As an extra, I recommend you to watch Modularity and Packaging for Angular2 Applications by Pawel from AngularConnect2015

这篇关于为什么将Webpack捆绑为"System.register"的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！