我正在使用Angular2和TypeScript组合一个应用程序(大规模)。它需要分成许多项目,每个项目都有许多组件,每个组件都有.html
视图,.css
样式表和.ts
逻辑/类。
我希望每个项目都能编译成一个*.js
文件并复制到将在IIS中运行的主机网站。这类似于构建WPF或Silverlight应用程序的方式,.xaml
文件都被编译到.dll
。
我已经浏览了网页,并且能够使用.ts
选项将.js
个文件构建到单个--outFile
文件中。但这并不能帮助我处理.html
个文件或css
。
任何帮助都会受到高度赞赏,即使它说我不能问的是: - )
斯蒂芬
答案 0 :(得分:26)
如果您使用默认的Angular2 tsconfig.json
和SystemJS loader:
"module": "system",
"moduleResolution": "node",
...
您可以将所有繁重的工作留在SystemJS Build Tool上。这是我在使用gulp
的项目中如何做到这一点:
编译* .ts和内联* .html模板
我立即使用gulp-angular-embed-templates
将所有templateUrl
内联到template
个字符串中(此插件适用于Angular 1. *和Angular 2)。
var tsc = require('gulp-typescript');
var tsProject = tsc.createProject('tsconfig.json');
var embedTemplates = require('gulp-angular-embed-templates');
gulp.task('app.build', function () {
var tsResult = gulp.src('app/src/**/*.ts', {base: './app/src'})
.pipe(embedTemplates()) // inline templates
.pipe(tsc(tsProject));
return tsResult.js
.pipe(gulp.dest('build/js'));
});
这将在build/js
目录中生成许多anonymous System.register modules。所有人都已经将templateUrl
内联。
将所有内容捆绑到一个.js
文件中
我使用SystemJS Build Tool是因为我觉得它比使用例如webpack更容易。所以,我还有另一项任务,就是让这个过程自动化:
var SystemBuilder = require('systemjs-builder');
gulp.task('app.systemjs.bundle', function () {
var builder = new SystemBuilder('build/js, {
paths: {
'*': '*.js'
},
meta: {
'angular2/*': {
build: false
},
'rxjs/*': {
build: false
}
}
});
return builder.bundle('main', 'build/js/app.bundle.js');
});
构建器采用与SystemJS相同的选项,因此请检查Config API。
致电builder.bundle('main', ...)
搜索main.js
(这是我使用Angular bootstrap
电话的初始脚本。它是您可以看到的同一文件{{3}因为我将.js
附加到构建器搜索的所有路径上。这是因为当您在TS中导入模块时,通常会调用:
import {ModalResultComponent} from './modal-result.component';
编译为./modal-result.component
依赖项,它不关心文件扩展名。这就是为什么我必须将*.js
添加到所有路径以帮助构建器查找所有已编译的JavaScript文件的原因。
meta
选项只是告诉构建器忽略我不想捆绑的依赖项。那是Angular2本身和rxjs
库,因为我在import 'rxjs/add/operator/map'
中包含了main.ts
。
这会生成一个app.bundle.js
个文件,所有模块都使用in the 5 min quickstart注册为命名模块。
使用我们的app.bundle.js
最后一部分是小菜一碟。我们只导入默认的Angular2内容,然后使用System.register告诉SystemJS我们所有的依赖项。
<script>
System.config({
packages: {
'/web': {
format: 'register',
defaultExtension: 'js'
}
},
bundles: {
'/web/app.bundle': ['main']
}
});
System.import('main').then(null, console.error.bind(console));
</script>
当我们调用System.import('main')
时,它实际上首先下载/web/app.bundle.js
并注册包中的所有模块,然后用Angular2引导程序导入模块main
。
那就是它!
您实际上根本不需要使用gulp
并使用纯node
脚本执行所有操作。
使用bundle
option等内容轻松捆绑CSS文件,我确信您可以找到有关如何在任何地方使用它的教程。
我确定还有其他方法来做同样的事情。 Angular2旨在限制您仅使用一种技术。但是,在我看来使用SystemJS是最简单的方法,因为它默认使用与Angular2相同的模块系统。
我确定你也可以使用例如commonjs
格式,但是这需要你为require()
加载器使用一些polyfill,但我还没有尝试过。我相信cssnano也许值得一试。