Как связать и минимизировать все пакеты в одном файле с помощью systemjs-builder

Question

У меня есть приложение angular2. Я использую следующую конфигурацию для объединения приложения. У меня есть все библиотеки под папкой lib и расслоение на папку js.

const Builder = require('systemjs-builder'); 
gulp.task('build-minify-angular', function() { 
    var builder = new Builder(); 
    builder.reset(); 
    builder.loader.defaultJSExtensions = true; 
    builder.config({ 
     packages: { 
      'rxjs': { 
       main: 'rxjs/rx', 
       defaultExtension: 'js' 
      } 
     }, 
     map: { 
      'myapp': "myapp/app.js", 
      '@angular/core': '@angular/core/bundles/core.umd.js', 
      '@angular/common': '@angular/common/bundles/common.umd.js', 
      '@angular/compiler': '@angular/compiler/bundles/compiler.umd.js', 
      '@angular/platform-browser': '@angular/platform-browser/bundles/platform-browser.umd.js', 
      '@angular/platform-browser-dynamic': '@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js', 
      '@angular/http': '@angular/http/bundles/http.umd.js', 
      '@angular/router': '@angular/router/bundles/router.umd.js', 
      '@angular/forms': '@angular/forms/bundles/forms.umd.js', 
      '@ng-bootstrap/ng-bootstrap': '@ng-bootstrap/ng-bootstrap/bundles/ng-bootstrap.js', 
     }, 
     baseURL: 'wwwroot/lib' 
    }); 
    builder.bundle('myapp', 'wwwroot/js/bundle.js', { minify: true }); 
}); 
``` 

The app works fine if I have the following configuration. 

window.onload =() => { 
       System.config({ 
        packages: { 
         'myapp': { 
          main: 'app', defaultExtension: 'js' 
         }, 
         '': { 
          defaultExtension: 'js' 
         } 
        }, 
        map: { 
         'rxjs': '../../js/rxjs/', 
         '@@angular/core': '../../js/@@angular/core/bundles/core.umd.min.js', 
         '@@angular/common': '../../js/@@angular/common/bundles/common.umd.min.js', 
         '@@angular/compiler': '../../js/@@angular/compiler/bundles/compiler.umd.min.js', 
         '@@angular/platform-browser': '../../js/@@angular/platform-browser/bundles/platform-browser.umd.min.js', 
         '@@angular/platform-browser-dynamic': '../../js/@@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.min.js', 
         '@@angular/http': '../../js/@@angular/http/bundles/http.umd.min.js', 
         '@@angular/router': '../../js/@@angular/router/bundles/router.umd.min.js', 
         '@@angular/forms': '../../js/@@angular/forms/bundles/forms.umd.min.js', 
         '@@ng-bootstrap/ng-bootstrap': '../../js/@@ng-bootstrap/ng-bootstrap/bundles/ng-bootstrap.js', 
        } 
       }); 
       System.import("myapp"); 
      } 

приложение не работает, если я удалить карту из конфигурации.

Я ожидал systemjs-строитель для перевяжите MyApp и все угловые библиотеки в одном bundle.js файл. Но это не так, и поиск пакетов в папке различных пакетов.

Как я могу связать myapp и его зависимости в одном файле?

Answer 1

Изменить

builder.bundle('myapp', 'wwwroot/js/bundle.js', { minify: true }); 

будет

builder.buildStatic('myapp', 'wwwroot/js/bundle.js', { minify: true }); 

Это создаст единый прямоприменяемый файл, который вы можете включить на вашей странице index.html