如何使用 Angular2 连接 TypeScript 文件，例如 Rails assets:precompile？答案

【问题标题】：How can I concat TypeScript files with Angular2 like Rails assets:precompile?如何使用 Angular2 连接 TypeScript 文件，例如 Rails assets:precompile？
【发布时间】：2015-12-22 12:35:41
【问题描述】：

如何将多个 TypeScript 与 Angular2 文件连接成单个 JS 文件，如 Rails assets:precompile？

例如，在a tutorial of angular2 official page 中，您会看到四个 .ts 文件：

app.component.ts
boot.ts
hero.ts
hero-detail.component.ts

当您查看app.component.ts 文件时，您会看到以下部分：

import {Hero} from './hero';
import {HeroDetailComponent} from './hero-detail.component';

当您分别编译所有 .ts 文件时，它可以完美运行，但我想将它们 concat() 合并到一个 .js 文件中，以便减少 http 请求。我正在使用 gulp，并尝试了 gulp-concat，但没有成功。 browserify 两者都没有。

有人会帮忙吗？提前致谢。

【问题讨论】：

标签： angular typescript gulp

【解决方案1】：

听起来您正在寻找类似 Webpack 的东西。 Webpack 会将您的 ts 文件转换为 js，然后创建一个模块包，您可以将其包含在 <script> 标签中。它不仅会转译您的代码，还会构建其依赖项，包括 Angular 2 本身（及其依赖项）。

这是一个简单的 Angular 2 和 Webpack 入门项目，由 Angular 2 开发人员之一编写：https://github.com/pkozlowski-opensource/ng2-webpack-play

【讨论】：

【解决方案2】：

看起来 typescript 将从 1.8 版开始support concatenating multiple files(with modules)（1.7.5 是当前版本）。还有另一种方式using webpack，不过具体是怎么做的不知道。

【讨论】：

AngularClass 启动器没有什么问题，但它非常复杂。我建议你看看其中一个更简单的 Webpack+Angular2 项目，除非你真的知道自己在做什么

【解决方案3】：

我使用 JSPM 来准备我的 angular2 项目生产。 JSPM 等其他流行工具包括 webpack 和 browserfy。 JSPM 将完成的一项重要任务是捆绑构成 angular2 项目的各种模块。我还将“selfExecutingBundle”标志设置为 true，并让 JSPM 制作一个捆绑的 js 文件（例如 myApp.bundled.js），然后从那里缩小它（myApp.bundled.min.js），并在index.html 文件。

<html>

<head>
    <title>Hello Angular World</title>
</head>
<body>
<div>
    <my-app>Loading...</my-app>
</div>
    <script src="/js/myApp.bundle.min.js"></script>
</body>

</html>

这就是你所需要的！

将来，当 HTTP/2 规范更普遍时，可能不需要捆绑基于模块的项目，但现在我认为需要捆绑。

【讨论】：

你有关于这个实现的更多细节吗？