Angular2“入门”部署与SystemJS
Angular2“入门”部署与SystemJS
提问于 2016-03-21 14:36:57
对于整个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之前，我看到了100万零1次点击量，但我想知道SystemJS如何在决定使用更多库之前如何处理这个问题。
回答 1
Stack Overflow用户
回答已采纳
发布于 2016-04-06 23:04:46
好吧，想清楚了。
基本上，您不需要对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(只需保留它在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>页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/36133943
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号