Angular2使用SystemJS進行部署「入門」

Question

對於整個SystemJS來說，這是一件新事物，所以我可能會對它的文檔中的重要部分非常敏感。我非常熟悉使用Browserify捆綁的東西，但是整個SystemJS讓我在部署時感到頭疼。沒有雙關語意思，因爲我愛的是SystemJS，否則。

由於從具有與Angular25分鐘快速啓動相同的配置配置文件如下：

<!-- 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生成器從我Gulpfile如下：

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

我現在有一個app.js文件。回到HTML文件如何在捆綁狀態下使用應用程序代碼？因爲在進行以下更新時出現angular2-polyfills.js:322 Error: SyntaxError: Unexpected identifier錯誤。請注意，我已經取代app.config.js與/js/app/app.js：

<!-- 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一百萬和一個安打，但我想知道如何SystemJS本身處理這在決定使用更多的庫之前。

Answer 1

好吧，明白了這一點。

基本上，你不應該需要做任何事情的HTML文件，並可以保持原樣。

不過，我需要讓SystemJS生成器自使用build.buildStatic代替build.bundle

所以......以下工作執行：

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（剛剛離開，因爲它處於開發模式）

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