如何为生产构建 angular2 应用程序

Question

我已经完成了angular2 tour of heroes。我想知道如果我想为生产构建这个项目怎么办。我只想将 2 个文件添加到 index.html：appScripts.js 和 vendorScripts.js。 我已经用选项outFile 编译了我的ts 文件，所以我有我的appScripts.js 但它不起作用。这是我的 gulpfile 中的一些代码：

gulp.task('compile', ['clean'], function() {

    var tsProject = typescript.createProject('tsconfig.json', {
        outFile: 'app.js'
    });

    var tsResult = gulp.src(['app/**/*.ts'])
        .pipe(typescript(tsProject));
    return tsResult.js
        .pipe(gulp.dest('./dist'));
});

我认为这是因为，我们在项目 ts 文件中加载了一些像 @angular/core 这样的角度模型，并且因为一些 systemjs 的东西..

有什么解决办法吗？

Answer 1

我已经找到了解决方案。您应该将ts 文件编译为js 文件，然后通过systemjs-builder 捆绑它们。 这是我的 gulp 任务：

var Builder  = require("systemjs-builder");
gulp.task("builder", function() {

        var builder = new Builder(); 

        builder.loadConfig('./systemjs.config.js')
            .then(function() {
                builder.buildStatic('dist/main.js', 'public/appScript.js')
                    .then(function () {
                        console.log('Build complete');
                    })
                    .catch(error);
            });
});

buildStatic 方法为您的应用程序创建最终的 javascript 文件。