Angular 2如何连接文件以进行生产答案

【问题标题】：Angular 2 how to concatenate files for productionAngular 2如何连接文件以进行生产
【发布时间】：2016-10-05 20:52:36
【问题描述】：

在生产环境中捆绑/连接 Angular 2 应用程序的推荐方法是什么？理想情况下，我想要一个 index.html 和一个 app.min.js 文件。

Angular 2 文档介绍了webpack，但对于如此简单的任务，该工具似乎过于复杂了。老实说，本教程是我读过的最糟糕的教程之一。我花了两个小时试图让它适合我的应用程序，但没有成功。

我还听说过Grunt 和Gulp 等工具。将 Angular 2 应用程序构建到生产就绪工件的最简单方法是什么？

【问题讨论】：

标签： javascript html angularjs build angular

【解决方案1】：

要将所有模块放入一个 JS 文件中，您需要在 TypeScript 编译器配置中利用 outFile 属性。

您可以在 gulp 中使用以下内容：

const gulp = require('gulp');
const ts = require('gulp-typescript');

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

gulp.task('tscompile', function () {
  var tsResult = gulp.src('./app/**/*.ts')
                   .pipe(ts(tsProject));

  return tsResult.js.pipe(gulp.dest('./dist'));
});

然后您可以在处理链中添加一个任务来丑化生成的app.js 文件。

我认为这个问题可以帮助你：

How do I actually deploy an Angular 2 + Typescript + systemjs app?

【讨论】：

我收到几十个来自 Angular 核心和 rxjs 的找不到模块“Promise”和“Map”错误
是的，您需要在 gulpfile.js 中添加类型（browser.d.ts）。有关详细信息，请参阅此文件：github.com/templth/angular2-packaging/blob/master/gulpfile.js.
我试过你的例子，但得到了完全相同的错误。我正在使用新版本的 angular（文件夹是 node_modules/@angular）并且没有打字文件夹

【解决方案2】：

您可以将SystemJS 与 Gulp 一起使用来捆绑您的 Angular2 应用程序以进行生产。

这是source，我将在 HTML 中直接引用的任何库捆绑到 vendor.min.js 中，并将所有应用程序代码以及通过我的 system.config.js 引用的任何库捆绑到 app.min.js .

// Bundle dependencies into vendors file
gulp.task('bundle:libs', function () {
    return gulp.src([
        'node_modules/jquery/dist/jquery.min.js',
        'node_modules/bootstrap/dist/js/bootstrap.min.js',
        'node_modules/semantic-ui/dist/semantic.min.js',
        'node_modules/es6-shim/es6-shim.min.js',
        'node_modules/es6-promise/dist/es6-promise.min.js',
        'node_modules/systemjs/dist/system.src.js',
        'system.config.js',
      ])
        .pipe(concat('vendors.min.js'))
        .pipe(uglify())
        .pipe(gulp.dest('public/lib/js'));
});

// Compile TypeScript to JS
gulp.task('compile:ts', function () {
  return gulp
    .src([
        "src/**/*.ts",
        "typings/*.d.ts"
    ])
    .pipe(tsc({
        "module": "system",
        "moduleResolution": "node",
        "outDir": "public/dist/js",
        "target": "ES5"
    }))
    .pipe(sourcemaps.write('.'))
    .pipe(gulp.dest('public/dist'));
});

// Generate systemjs-based builds
gulp.task('bundle:js', function() {
  var builder = new sysBuilder('public', './system.config.js');
  return builder.buildStatic('app', 'public/dist/js/app.min.js');
});

// Minify JS bundle
gulp.task('minify:js', function() {
  return gulp
    .src('public/dist/js/app.min.js')
    .pipe(uglify())
    .pipe(gulp.dest('public/dist/js'));
});

gulp.task('scripts', ['compile:ts', 'bundle:js', 'minify:js']);

【讨论】：