小编典典

为什么将Webpack捆绑为“ System.register”

angularjs

我正在尝试使用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'}
        ]

    }
};

谁能为我修复?谢谢。


阅读 390

收藏
2020-07-04

共1个答案

小编典典

正如@Ron建议的

如果您使用Webpack捆绑应用程序,则必须将代码转换为commonjs。解决方案是更改modulecommonjstsconfig.json中的。

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

这是使用webpack的angular2种子存储库的列表,可能会有所帮助

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

2020-07-04