对于整个 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 是如何本地处理这个问题的。
最佳答案
好的,明白了。
基本上,您不需要对 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>
关于gulp - 使用 SystemJS 的 Angular2 "Getting Started"部署,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/36133943/