如何构建用于生产的 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 模型，例如 @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 文件。

如何构建用于生产的 angular2 应用程序

How to build angular2 app for production

javascript

angularjs

gulp

systemjs

angular