如何构建用于生产的angular2应用程序
我已完成angular2 tour of heroes
。我想知道如果我想建立这个项目的生产。我只想添加2个文件到index.html
:appScripts.js
和vendorScripts.js
。 我已经编译了我的ts
文件和选项outFile
,所以我有我的appScripts.js
但它不起作用。下面是一些代码在我gulpfile:如何构建用于生产的angular2应用程序
gulp.task('compile', ['clean'], function() {
var tsProject = typescript.createProject('tsconfig.json', {
outFile: 'app.js'
});
var tsResult = gulp.src(['app/**/*.ts'])
.pipe(typescript(tsProject));
return tsResult.js
.pipe(gulp.dest('./dist'));
});
我想这是因为,我们在项目中加载一些角度车型,如@angular/core
ts
文件,因为一些systemjs东西..
有什么办法呢?
我已经找到了解决方案。您应该将ts
文件编译为js
文件,然后通过systemjs-builder
将它们捆绑在一起。 这是我的任务,一饮而尽:
var Builder = require("systemjs-builder");
gulp.task("builder", function() {
var builder = new Builder();
builder.loadConfig('./systemjs.config.js')
.then(function() {
builder.buildStatic('dist/main.js', 'public/appScript.js')
.then(function() {
console.log('Build complete');
})
.catch(error);
});
});
buildStatic
方法为应用程序创建最终的JavaScript文件。
您能否分享您的产品包的大小? – NetProvoke
这是相当大的。 1 415 Kb。 –
研究也是这样,网上没有太多。请分享,如果你会发现一些东西。英雄教程应用程序的游览总共下载数百个文件2.2 Mb。必须有一种方法来减少产品部署。 –