web-dev-qa-db-fra.com

Comment regrouper Angular 2 en utilisant System JS Builder?

J'utilise actuellement System JS avec System JS Builder pour regrouper mon application, ses actifs et les bibliothèques qu'elle référence. Mon problème est que je peux regrouper des bibliothèques référencées explicitement dans le fichier index.html, par exemple:

<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>

Cependant, je ne peux pas comprendre comment je peux regrouper Angular 2 lui-même, ou au moins les modules requis de Angular 2, car ils ne sont pas réellement référencé dans le HTML. Comment faire?

angularbundling-and-minificationsystemjs
21
user3452805

En utilisant systemjs-builder, vous pouvez regrouper Angular 2 avec votre code d'application et regrouper vos autres bibliothèques séparément.

J'ai regroupé toute bibliothèque que je référencerais directement en HTML dans un fichier vendors.min.js, et toute bibliothèque référencée via mon system.config.js plus le code d'application dans un app.min.js. Dans cet exemple vous pouvez voir que toutes les dépendances de Tour of Heroes sont chargées dans la page en <10 requêtes réseau ( code source ).

// 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

Vous pouvez utiliser un bundler comme Webpack ou Rollup (ma préférence car il fait trembler les arbres).

L'équipe Angular semble rassembler d'excellents outils Rollup à temps pour la version complète. The day 2 keynote de ng-conf cette année a discuté et démontré le compilateur hors ligne . Commencez à regarder cela à 25h30.

2
Gary