Come si può unire Angular 2 usando System JS Builder?

Question

Attualmente sto utilizzando System JS con System JS Builder per raggruppare la mia applicazione, le sue risorse e le librerie a cui fa riferimento. Il mio problema è che posso raggruppare le librerie che si indicano esplicitamente nel index.html, ad esempio:

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

Tuttavia, non riesco a capire come posso impacchettare angolare 2 stessa, o almeno i moduli necessari da Angular 2, in quanto non sono effettivamente referenziati nell'HTML. Come si può fare?

Answer 1

Utilizzando systemjs-builder è possibile raggruppare Angular 2 con il codice dell'app e raggruppare le altre librerie separatamente.

Ho raggruppato qualsiasi libreria a cui fare riferimento direttamente in HTML in un vendors.min.js e qualsiasi libreria a cui fa riferimento tramite il mio system.config.js più il codice app in un app.min.js. In questo example puoi vedere che tutte le dipendenze in Tour of Heroes vengono caricate nella pagina in < 10 richieste di rete (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']); 

Answer 2

È possibile utilizzare un bundler come Webpack o Rollup (la mia preferenza è dovuta alla scuotitura degli alberi).

Il team di Angular sembra stia mettendo insieme degli ottimi strumenti attorno allo Rollup in tempo per la versione completa. Il keynote del giorno 2 di ng-conf quest'anno ha discusso e dimostrato il compilatore offline . Start watching this alle 25:30.