Gulp Angular2“；“入门”；使用SystemJS部署

这对整个SystemJS来说有点陌生，所以我可能对它的文档中的重要部分非常了解。我非常熟悉使用Browserify捆绑东西，但是当涉及到部署时，整个SystemJS让我摸不着头脑。没有双关语，因为我喜欢SystemJS

给定以下内容，配置文件与Angular2 5分钟快速启动中的配置相同：

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

我现在有一个app.js文件。回到HTML文件，如何在捆绑状态下使用应用程序代码？因为在进行以下更新时，我得到了一个

angular2 polyfills.js:322错误：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>

System.import（'/js/app/app.boot'）。然后（null，console.error.bind（console））；

我在仅仅使用JSPM方面已经有过无数次的成功，但我想知道SystemJS在决定使用更多库之前是如何处理这个问题的。

好的，我已经解决了这个问题

基本上，您不需要对html文件做任何事情，只需保持原样即可

但是，我需要通过使用

build.buildStatic

而不是

build.bundle

使SystemJS Builder自动执行

所以。。。以下工作：

JS

HTML（保持在开发模式）

System.import（'app/main'）
.then（null，console.error.bind（console））；

Hi@Mitchell，关于您的代码，只有两个问题；1） 您是否应该删除HTML中app.config.js的导入，而改用app.js？2） 关于HTML中的node_模块导入，您是否在部署文件夹中包含这些文件夹/文件？或者用捆绑包就足够了？嗨@david，是的，这篇文章是在测试版，现在有些东西已经改变了，这是在RC4中。由于我最近没有机会更新自己，我想你的第一个问题可能适用，也可能不再适用。至于第二个问题，您必须在构建目录中包含这些node_模块，但我一直在使用gulp将它们聚合到一个libs.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>

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

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