Angular2 "Getting Started" 使用 SystemJS 部署

Question

对整个 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>

以及使用 SystemJS Builder 来自我的 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 文件进行任何操作，只需保持原样即可。

但是，我需要使用 build.buildStatic 而不是 build.bundle

让 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（保持开发模式）

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

Angular2 "Getting Started" 使用 SystemJS 部署

Angular2 "Getting Started" deployment with SystemJS

gulp

systemjs

angular