Question

我想创建一个带有angular2依赖项但排除我的app 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

这样做，

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');
    });
});

Answer 2

你正在创建一个静态包（即可以由<script>直接加载）你的应用程序包含所有依赖项，因此是有角度的。要将应用程序与angular（或任何其他库）分开，您必须通过创建require所有依赖项的文件来构建供应商包。应用程序包必须是应用程序及其依赖项和供应商包之间的区别。

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

但是，如果您在更改源文件后所关注的是周转时间，我建议您查看webpack。它有插件来创建delta捆绑包，并且通过它的webpack-dev-server，它可以非常快速地重建已更改的内容（在我的设置中大约2秒）。我不认为您可以使用SystemJS获得类似的快速周转时间。

从systemjs-builder中排除我的angular2 rc应用程序文件

2 个答案: