我正在使用 Angular2 和 TypeScript 组合一个应用程序（大型）。它将需要划分为多个项目，每个项目将有多个组件，每个组件都有.html 视图、.css 样式表和.ts 逻辑/类。
我希望每个项目都编译为单个*.js 文件，并复制到将在 IIS 中运行的主机网站。这类似于使用 .xaml 文件构建 WPF 或 Silverlight 应用程序的方式，所有这些文件都编译到 .dll 中。
我浏览了网络并能够使用--outFile 选项将.ts 文件构建为单个.js 文件。但这对.html 文件或css 没有帮助。
任何帮助都将不胜感激，即使我的要求是不可能的 :-)
斯蒂芬
【问题讨论】：
标签： angular typescript systemjs systemjs-builder
如果您使用默认的 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 更容易。所以，我有另一个 gulp 任务来自动化这个过程：
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 调用的初始脚本。它与您可以看到in the 5 min quickstart 的文件相同），因为我将.js 附加到构建器搜索的所有路径中。这是因为当您在 TS 中导入模块时，您通常会调用：
import {ModalResultComponent} from './modal-result.component';
它被编译为./modal-result.component 依赖，它不关心文件扩展名。这就是为什么我必须在所有路径中添加*.js 以帮助构建器找到所有已编译的 JavaScript 文件。
meta 选项只是告诉构建器忽略我不想捆绑的依赖项。那是 Angular2 本身和 rxjs 库，因为我在 main.ts 中包含了 import 'rxjs/add/operator/map'。
这会生成一个app.bundle.js 文件，其中所有模块都使用System.register 注册为命名模块。
使用我们的app.bundle.js
最后一部分是小菜一碟。我们只需导入默认的 Angular2 内容，然后使用 bundle option 告诉 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 脚本来做所有事情。
使用 cssnano 之类的东西可以轻松捆绑 CSS 文件，我相信您可以在任何地方找到有关如何使用它的教程。
我敢肯定，同样的事情还有其他方法。 Angular2 旨在不限制您只使用一种技术。但是，在我看来，使用 SystemJS 似乎是最简单的方法，因为它默认使用与 Angular2 相同的模块系统。
我相信您也可以使用 commonjs 格式，但这需要您还为 require() 加载程序使用一些 polyfill，但我还没有尝试过。我相信UMD 可能也值得一试。
【讨论】：