從systemjs-builder中排除我的angular2 rc應用程序文件

Question

我想用我的angular2依賴關係創建一個js文件但排除我的應用程序js文件。

因爲我在一個ts文件（例如我的clientList.component.ts）中做的每一個改變，我都必須重新編譯這個包。

這是我的任務，一飲而盡：

gulp.task('bundle:angular', function() { 
var builder = new Builder('', './systemjs.config.js'); 
return builder 
    .buildStatic('./wwwroot/ngApp/main.js', './wwwroot/js/libs/angular.bundle.js', 
         { minify: true, sourceMaps: true}) 
    .then(function (output) { 
     console.log('Build complete'); 
    }) 
    .catch(function (err) { 
     console.log('Build error'); 
    }); 
}); 

這是我systemjs.config.js

(function (global) { 
    var map = { 
     'app': './wwwroot/ngApp', 
     'rxjs': './wwwroot/js/libs/rxjs', 
     '@angular': './wwwroot/js/libs/@angular' 
    }; 
    var packages = { 
     'app': { main: 'main.js', defaultExtension: 'js' }, 
      'rxjs': { defaultExtension: 'js' } 
    }; 

    var packageNames = [ 
     '@angular/common', 
     '@angular/compiler', 
     '@angular/core', 
     '@angular/http', 
     '@angular/platform-browser', 
     '@angular/platform-browser-dynamic', 
     '@angular/router', 
     '@angular/router-deprecated', 
     '@angular/testing', 
     '@angular/upgrade' 
    ]; 
    packageNames.forEach(function (pkgName) { 
    packages[pkgName] = { main: 'index.js', defaultExtension: 'js' }; 
    }); 

    var config = { 
    map: map, 
    packages: packages 
    } 

    if (global.filterSystemConfig) { global.filterSystemConfig(config); } 
    System.config(config); 

})(this); 

感謝

Answer 1

你正在做一個靜態包（即一個能直接加載<script>）你的應用程序，其中包括所有的依賴關係，因此角度。要從角度（或任何其他庫）中分離您的應用程序，您必須創建一個文件require的所有依賴關係來構建供應商捆綁軟件。應用程序包必須是應用程序及其依賴項和供應商包之間的區別。

https://github.com/systemjs/builder#example---common-bundles

不過，如果你是後周轉時間變化的源文件後，我會建議在尋找的WebPack。它具有創建增量包的插件，使用它的webpack-dev-server，它可以快速重建已更改的內容（在我的設置中約2秒）。我不認爲使用SystemJS可以獲得類似的快速週轉時間。

Answer 2

這樣做，

gulp.task('bundle:angular', function() { 
var builder = new Builder('', './systemjs.config.js'); 
return builder 
    .buildStatic('./wwwroot/ngApp/main.js - @angular', './wwwroot/js/libs/angular.bundle.js', 
         { minify: true, sourceMaps: true}) 
    .then(function (output) { 
     console.log('Build complete'); 
    }) 
    .catch(function (err) { 
     console.log('Build error'); 
    }); 
});