如何使用 System JS Builder 捆绑 Angular 2？

Question

我目前正在使用 System JS 和 System JS Builder 来捆绑我的应用程序、它的资产和它引用的库。我的问题是我可以捆绑在 index.html 中明确引用的库，例如：

<script src="node_modules/es6-shim/es6-shim.min.js"></script>
<script src="node_modules/zone.js/dist/zone.js"></script>
<script src="node_modules/reflect-metadata/Reflect.js"></script>
<script src="node_modules/systemjs/dist/system.src.js"></script>

但是，我不知道如何捆绑 Angular 2 本身，或者至少捆绑 Angular 2 所需的模块，因为 HTML。如何做到这一点？

Answer 1

您可以使用像 Webpack or Rollup 这样的打包器（我的偏好是因为它会进行 tree-shaking）。

Angular 团队似乎正在围绕 Rollup 及时整合一些很棒的工具，以便完整发布。今年 ng-conf 的 day 2 keynote 讨论并演示了 离线编译器 。 Start watching this 在 25:30。

Answer 2

使用 systemjs-builder，您可以将 Angular 2 与您的应用程序代码捆绑在一起，并单独捆绑您的其他库。

我将我将在 HTML 中直接引用的任何库捆绑到 vendors.min.js 中，并将通过我的 system.config.js 加上应用程序代码引用的任何库捆绑到 app.min.js 中。在这个example you can see that all the dependencies in Tour of Heroes are loaded into the page in <10 network requests (source code).

// 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(sourcemaps.init())
    .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']);

如何使用 System JS Builder 捆绑 Angular 2？

How can you bundle Angular 2 using System JS Builder?

bundling-and-minification

systemjs

angular