web-dev-qa-db-ja.com

System JS Builderを使用して、どのようにAngular 2をバンドルできますか？

現在、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で参照されています。

angularbundling-and-minificationsystemjs
21
user3452805

Systemjs-builderを使用すると、アプリコードにAngular 2をバンドルし、他のライブラリを個別にバンドルできます。

HTMLで直接参照するライブラリをvendors.min.jsにバンドルし、system.config.jsとアプリコードを介して参照するライブラリをapp.min.jsにバンドルしました。この 例 では、Tour of Heroesのすべての依存関係が<10ネットワークリクエストでページに読み込まれていることがわかります（ ソースコード ）。

// 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']);
19
Steely

Webpack または Rollup のようなバンドラーを使用できます（ツリーシェーキングを行うため、私の好み）。

Angularチームは、完全なリリースに間に合うようにRollupの素晴らしいツールをまとめているようです。今年のng-confの2日目の基調講演で、オフラインコンパイラについて議論し、デモンストレーションしました。 視聴を開始this at 25:30。

2
Gary