Sistem JS Builder'ı kullanarak Angular 2'yi nasıl paketleyebilirsiniz?

Question

Şu anda, uygulamanızı, varlıklarını ve başvurduğu kitaplıkları birleştirmek için System JS Builder ile birlikte Sistem JS kullanıyorum. Sorunum index.html, eg açıkça başvurulan kitaplıkları paket olmasıdır: Ancak

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

, ben Açısal 2 kendisinin veya en azından gerekli modülleri paket nasıl bilemiyorum HTML'de gerçekte atıfta bulunmadıkları için açısal 2. Bu nasıl yapılabilir?

Answer 1

Systemjs-oluşturucuyu kullanarak uygulama kodunuzla Angular 2'yi paketleyebilir ve diğer kitaplıklarınızı ayrı olarak paketleyebilirsiniz.

Doğrudan HTML'de başvurulan tüm kitaplıkları bir vendors.min.js dosyasına ve system.config.js artı uygulama kodumla başvurulan tüm kitaplıkları bir app.min.js. Bu example'da, Tour of Heroes'daki tüm bağımlılıkların, < 10 ağ isteğinde (source code) sayfaya yüklendiğini görebilirsiniz.

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

Webpack veya Rollup gibi bir dağıtıcıyı kullanabilirsiniz (tercihim ağaç çalkalaması olduğu için).

Açısal takım, tam serbest bırakma için zamanında Rollup civarında harika bir takım oluşturuyor. Bu yıl gün 2 ng-conf'in nolu anahtar sözcüğü tartıştı ve çevrimdışı derleyici'u gösterdi. Saat 25:30 da Start watching this.