如何使用 Gulp 和 SystemJS 捆绑 Angular 2 Typescript 应用程序？答案

【问题标题】：How to bundle Angular 2 Typescript app using Gulp and SystemJS?如何使用 Gulp 和 SystemJS 捆绑 Angular 2 Typescript 应用程序？
【发布时间】：2016-06-16 14:43:39
【问题描述】：

我在我的 Angular 2 项目中使用 Typescript 和 SystemJS 来加载模块，并使用 Gulp 来执行任务运行器。项目中当前的 Angular 版本是 RC2，但 RC1 也存在问题。我按照布兰多回答here的步骤。

捆绑我的应用程序和网站 SystemJS 的初始加载后抛出错误：

错误：http://localhost:57462/app/app.bundle.js 检测为寄存器但未执行。

应用程序可以运行，但控制台中的错误绝对不是一件好事。

我在空项目上测试了我的配置，问题又出现了，所以我认为问题出在配置中。

这里是：

Gulp 文件

var gulp = require('gulp');
var sourcemaps = require('gulp-sourcemaps');
var concat = require('gulp-concat');
var typescript = require('gulp-typescript');
var jspm = require('gulp-jspm-build');

gulp.task('compile:ts', function () {
    return gulp.src(['./appTS/**/*.ts'])
        .pipe(sourcemaps.init())
            .pipe(typescript({
                noEmitOnError: true,
                target: 'ES5',
                removeComments: false,
                experimentalDecorators: true,
                emitDecoratorMetadata: true,
                module: 'system',
                moduleResolution: 'node'
            }))
        .pipe(sourcemaps.write('./'))
        .pipe(gulp.dest('./app/'));
});

gulp.task('copy:vendor', function () {
    return gulp.src([
        'node_modules/systemjs/dist/system-polyfills.js',
        'node_modules/reflect-metadata/Reflect.js',
        'node_modules/core-js/client/shim.min.js',
        'node_modules/zone.js/dist/zone.min.js',
        'node_modules/systemjs/dist/system.js',
        'node_modules/rxjs/bundles/Rx.js'
    ]).pipe(gulp.dest('./assets/vendor/'));
});

gulp.task('bundle:app', ['compile:ts'], function () {
    return jspm({
        bundleOptions: {
            minify: true,
            mangle: false
        },
        bundleSfx: true,
        bundles: [
            { src: './app/main.js', dst: 'bundle.js' }
        ]
    })
    .pipe(gulp.dest('./app/'));
});

gulp.task('bundle', ['bundle:app', 'copy:vendor'], function () {
    return gulp.src([
        './assets/vendor/Reflect.js',
        './assets/vendor/shim.min.js',
        './assets/vendor/zone.min.js',
        './app/bundle.js'])
    .pipe(concat('app.bundle.js'))
    .pipe(gulp.dest('./app/'))
});

gulp.task('default', ['bundle']);

var packages = {
    app: {
        format: 'register',
        defaultExtension: 'js'
    },
    "symbol-observable": { main: 'index.js', defaultExtension: 'js' },
    "reflect-metadata": { main: 'Reflect.js', defaultExtension: 'js' }
};

var ngPackageNames = ['common',
                      'compiler',
                      'core',
                      'http',
                      'platform-browser',
                      'platform-browser-dynamic',
                      'router',
                      'router-deprecated',
                      'upgrade'];

ngPackageNames.forEach(function (element, index, array) {
    packages['@angular/' + element] = { main: 'bundles/' + element + '.umd.min.js', defaultExtension: 'js' };
});

System.config({
    main: 'dispel.bundle.min',
    defaultExtension: 'js',
    format: 'register',
    packages: packages,
    baseURL: "/",
    defaultJSExtensions: true,
    transpiler: false,
    paths: {
        "node_modules*": "node_modules*",
        "@angular*": "node_modules/@angular/*"
    },
    map: {
        "@angular": "node_modules/@angular",
        "symbol-observable": "node_modules/symbol-observable",
        "ng2-translate": "node_modules/ng2-translate",
        "es6-shim": "node_modules/es6-shim",
        "reflect-metadata": "node_modules/reflect-metadata",
        "rxjs": "node_modules/rxjs",
        "zone.js": "node_modules/zone.js"
    }
});

【问题讨论】：

你能创建一个我们可以克隆和测试的仓库吗？
另外，您使用system/register 格式有什么特别的原因吗？如果在 TS 编译器中使用 "module": "commonjs" 并在系统配置中使用 format": "cjs" 会发生什么？
没有什么特别的原因。 SystemJS 不再抛出该错误，但出现了一个新错误：crypto.js not found。我在 System.config -> map 部分添加了"crypto": "node_modules/crypto-js/index.js" 映射，一切正常，但 SystemJS 对每个 crypto-js 文件（大约 30 个）发出单独的请求。
@Sasxa 你能发布答案吗
我正在使用这个启动器，它可以满足您的所有需求以及更多功能：github.com/antonybudianto/angular2-starter gulp 文件很好地划分为单独的任务，并且非常易于管理。

标签： typescript angular gulp systemjs jspm

【解决方案1】：

您是否尝试过在 bundle:app gulp 任务中使用 SystemJS Builder 而不是 jspm？

以下是如何捆绑运行 2.0.0-rc.1 (source, live example) 的英雄之旅的简化版本。

gulpfile.js

var gulp = require('gulp');
var sourcemaps = require('gulp-sourcemaps');
var concat = require('gulp-concat');
var typescript = require('gulp-typescript');
var systemjsBuilder = require('systemjs-builder');

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

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

// Copy and bundle dependencies into one file (vendor/vendors.js)
// system.config.js can also bundled for convenience
gulp.task('bundle:vendor', function () {
    return gulp.src([
        'node_modules/zone.js/dist/zone.js',
        'node_modules/reflect-metadata/Reflect.js',
        'node_modules/systemjs/dist/system-polyfills.js',
        'node_modules/core-js/client/shim.min.js',
        'node_modules/systemjs/dist/system.js',
        'system.config.js',
      ])
        .pipe(concat('vendors.js'))
        .pipe(gulp.dest('vendor'));
});

// Copy dependencies loaded through SystemJS into dir from node_modules
gulp.task('copy:vendor', function () {
    return gulp.src([
        'node_modules/rxjs/bundles/Rx.js',
        'node_modules/@angular/**/*'
    ])
    .pipe(gulp.dest('vendor'));
});

gulp.task('vendor', ['bundle:vendor', 'copy:vendor']);
gulp.task('app', ['compile:ts', 'bundle:app']);

// Bundle dependencies and app into one file (app.bundle.js)
gulp.task('bundle', ['vendor', 'app'], function () {
    return gulp.src([
        'app/app.js',
        'vendor/vendors.js'
        ])
    .pipe(concat('app.bundle.js'))
    .pipe(uglify())
    .pipe(gulp.dest('./app'));
});

gulp.task('default', ['bundle']);

system.config.js

var map = {
  'app':                                'app',
  'rxjs':                               'vendor/rxjs',
  'zonejs':                             'vendor/zone.js',
  'reflect-metadata':                   'vendor/reflect-metadata',
  '@angular':                           'vendor/@angular'
};

var packages = {
  'app':                                { main: 'main', defaultExtension: 'js' },
  'rxjs':                               { defaultExtension: 'js' },
  'zonejs':                             { main: 'zone', defaultExtension: 'js' },
  'reflect-metadata':                   { main: 'Reflect', defaultExtension: 'js' }
};

var packageNames = [
  '@angular/common',
  '@angular/compiler',
  '@angular/core',
  '@angular/http',
  '@angular/platform-browser',
  '@angular/platform-browser-dynamic',
  '@angular/router',
  '@angular/router-deprecated',
  '@angular/testing',
  '@angular/upgrade',
];

packageNames.forEach(function(pkgName) {
  packages[pkgName] = { main: 'index.js', defaultExtension: 'js' };
});

System.config({
  map: map,
  packages: packages
});

【讨论】：

如何使用gulp创建的app.bundle.js？
我不碍事，但真的需要帮助才能把所有东西放在一起。到目前为止，您的 gulp 文件是唯一对我有用的文件。如何使用 gulp 创建的 app.bundle.js？我在您的 gulpfile.ts 中没有看到您正在复制 index.html。
@DarshanPuranik 您不需要复制 index.html，只需将 app.bundle.js 包含在 index.html 中即可。一些文件名可能略有不同，但基本相同的策略可以在这里找到：github.com/smmorneau/tour-of-heroes
非常感谢内联示例，这是我的 gulpfile 中缺少的链接 :)

【解决方案2】：

也许这会有所帮助：

System.config({
  "meta": {
    "app.bundle.js": {
      "format": "register"
    }
  }
});

【讨论】：

不，很遗憾没有帮助。

【解决方案3】：

我尝试使用 gulp 和 Angular 2.4 捆绑生产，但所有示例都存在阻塞问题；即使git cloneing 工作示例也不起作用。我终于通过使用angular2-webpack-starter 并在那里复制我的文件来让它工作。事实证明，与使用 SystemJS 相比，依赖关系更容易管理，您必须添加到 system.config.js 并希望依赖关系遵循 SystemJS 想要的模式。

【讨论】：

【解决方案4】：

通过使用 Gulp，我们可以捆绑我们的项目，但我建议使用 ng build 或 npm build 进行捆绑，让 gulp 仅适用于任务运行者

【讨论】：