Angular2 "Getting Started" SystemJSでの展開

Question

このSystemJSの全体に新しいものがあるので、私はその重要な部分を完全に飾っているかもしれません。私は、Browserifyを使用してバンドルすることにかなり精通していますが、SystemJS全体では、展開に関しては私の頭が傷ついています。私はそうでなければSystemJSを愛しているので、何の意味もありません。私が今持っている

gulp.task('system-builder', function (cb) { 
    var builder = new Builder('./production/public/', './production/public/app.config.js'); 
    fs.copy('./client/node_modules', './production/public/node_modules', function(err) { 
     builder.bundle('./production/public/js/app/app.boot.js', './production/public/js/app/app.js') 
     .then(function() { 
      console.log('Build complete'); 
      cb(); 
     }) 
     .catch(function(err) { 
      console.log('Build error'); 
      console.log(err); 
     }); 
    }); 
}); 

：

<!-- 1. Load libraries --> 
<!-- IE required polyfills, in this exact order --> 
<script src="node_modules/es6-shim/es6-shim.min.js"></script> 
<script src="node_modules/systemjs/dist/system-polyfills.js"></script> 
<script src="node_modules/angular2/es6/dev/src/testing/shims_for_IE.js"></script> 

<script src="node_modules/angular2/bundles/angular2-polyfills.js"></script> 
<script src="node_modules/systemjs/dist/system.src.js"></script> 
<script src="node_modules/rxjs/bundles/Rx.js"></script> 
<script src="node_modules/angular2/bundles/angular2.dev.js"></script> 

<!-- 2. Configure SystemJS --> 
<script src="app.config.js"></script> 
<script> 
    System.import('app/main') 
     .then(null, console.error.bind(console)); 
</script> 

そしてSystemJS Builderを使用して、私のGulpfileから次Angular2 5分クイックスタートから同じ設定を持つ設定ファイルを持つから、次を考える

単一のapp.jsファイルHTMLファイルに戻るアプリケーションコードをバンドル状態で使用するにはどうすればよいですか？次の更新を行うときにangular2-polyfills.js:322 Error: SyntaxError: Unexpected identifierというエラーが発生するためです。

<!-- 1. Load libraries --> 
<!-- IE required polyfills, in this exact order --> 
<script src="node_modules/es6-shim/es6-shim.min.js"></script> 
<script src="node_modules/systemjs/dist/system-polyfills.js"></script> 
<script src="node_modules/angular2/es6/dev/src/testing/shims_for_IE.js"></script> 

<script src="node_modules/angular2/bundles/angular2-polyfills.js"></script> 
<script src="node_modules/systemjs/dist/system.src.js"></script> 
<script src="node_modules/rxjs/bundles/Rx.js"></script> 
<script src="node_modules/angular2/bundles/angular2.dev.js"></script> 

<!-- 2. Configure SystemJS --> 
<script src="/js/app/app.js"></script> 
<script> 
    System.import('/js/app/app.boot').then(null, console.error.bind(console)); 
</script> 

私はちょうどJSPMを使用して百万と1ヒットを見てきましたが、私はSystemJSがネイティブにこれを処理する方法を知りたい：私は/js/app/app.jsとapp.config.jsを交換していることに注意してくださいより多くのライブラリの使用を決定する前に。

Answer 1

これはわかりました。

基本的に、htmlファイルに何もする必要はありません。単にそのまま置いてください。

しかし、私の代わりにbuild.bundle

だから... ...次の作品のbuild.buildStaticを使用して実行SystemJS Builderの自己を作るために必要な：

JS

gulp.task('system-builder', function (cb) { 
    var builder = new Builder('./production/public/', './production/public/app.config.js'); 
    fs.copy('./client/node_modules', './production/public/node_modules', function(err) { 
     builder.buildStatic('./production/public/js/app/app.boot.js', './production/public/js/app/app.js') 
     .then(function() { 
      console.log('Build complete'); 
      cb(); 
     }) 
     .catch(function(err) { 
      console.log('Build error'); 
      console.log(err); 
     }); 
    }); 
}); 

HTML（ちょうどそれとして残しますはdevモードです）

<!-- 1. Load libraries --> 
<!-- IE required polyfills, in this exact order --> 
<script src="node_modules/es6-shim/es6-shim.min.js"></script> 
<script src="node_modules/systemjs/dist/system-polyfills.js"></script> 
<script src="node_modules/angular2/es6/dev/src/testing/shims_for_IE.js"></script> 

<script src="node_modules/angular2/bundles/angular2-polyfills.js"></script> 
<script src="node_modules/systemjs/dist/system.src.js"></script> 
<script src="node_modules/rxjs/bundles/Rx.js"></script> 
<script src="node_modules/angular2/bundles/angular2.dev.js"></script> 

<!-- 2. Configure SystemJS --> 
<script src="app.config.js"></script> 
<script> 
    System.import('app/main') 
     .then(null, console.error.bind(console)); 
</script>