如何使用System JS Builder捆绑Angular 2? [英] How can you bundle Angular 2 using System JS Builder?

问题描述

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

I'm currently using System JS with System JS Builder to bundle up my application, its assets, and the libraries that it references. My problem is that I can bundle libraries that are referenced explicitly in the index.html, e.g:

<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中引用.该怎么办?

However, I can't figure out how I can bundle Angular 2 itself, or at least the modules required from Angular 2, as they aren't actually referenced in the HTML. How can this be done?

推荐答案

使用systemjs-builder，您可以将Angular 2与应用程序代码捆绑在一起，并分别捆绑其他库.

Using systemjs-builder you can bundle Angular 2 with your app code and bundle your other libraries separately.

我将要在HTML中直接引用的任何库捆绑到vendor.min.js中，并且将通过system.config.js加上应用程序代码引用的任何库捆绑到app.min.js中.在此示例中，您可以看到《英雄之旅》中的所有依赖项都已加载到< 10网络请求中的页面(源代码).

I bundled any library I would reference directly in HTML into a vendors.min.js, and any library referenced through my system.config.js plus app code into an app.min.js. In this 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?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！