使用 RequireJs 和 Grunt 将 TypeScript 编译成单个文件

Question

我们正在尝试通过使用 Grunt 将包含许多文件的 TypeScript 项目编译成单个支持 AMD 的文件来优化它。我们已经研究了我们在互联网上可以找到的所有内容，但仍在努力正确掌握这项任务。只要我们不使用外部导入，编译就可以正常工作，但是一旦我们引用了外部库，这个过程就会失败。示例：

MyClass1.ts

import jquery = require('jquery');
export class MyClass1{
   //some code using jquery 
}

MyClass2.ts

import jquery = require('jquery');
export class MyClass2{
   //some other code using jquery 
}

在这种情况下，即使使用

操作 TypeScript 编译器

 tsc --out singlefile.js ...

实际上不会包含这两个文件。相反，它们将与 RequireJs 的适当 define 语句分开保留。我们知道可以使用 Grunt 的 requirejs 任务将所有这些文件连接到一个文件中，但这需要我们将 import 语句放入我们的内部项目中，而这些语句是不需要的。

我们正在寻找的是一种连接所有 TypeScript 文件的方法，它们捆绑了所有需要的导入，并且它们包含一个 define 块，其中包含对所有类已收集。

到目前为止，我们还没有找到将多个 define 语句优化为单个定义块的 Grunt 任务。我们可以看到两种策略：

将所有 TypeScript 文件连接成一个文件并编译它。问题：如何处理多个 import 语句（例如在上面的示例中， MyClass1 和 MyClass2 都依赖于 jquery），这会导致 TypeScript 编译错误。
单独编译每个文件并将 ex post 多个 define 块减少为一个块。

有人解决过这个问题吗？使用 Grunt / require 处理具有外部依赖性的多个文件的最佳实践是什么？是否有任何实用程序可以让我们重构 TypeScript 以处理多个导入（类似于 C# 的 Roslyn）？

Answer 1

您可以使用 systemjs to load your modules in dev time, and systemjs builder 将所有需要的文件捆绑到一个文件中。

Answer 2

您不应该使用 --out，因为它会尝试找出依赖关系顺序，并在您有外部依赖关系和 AMD 模块时填充 + 它在大型项目中速度很慢且确实无法维护。

实现有效构建的最佳方法是编译为多个 .js 文件，然后使用打包器作为下一个构建步骤 (rjs/systemjs/webpack)，如果切换到 commonJS 模块，则使用 browserify。

Compiling TypeScript with RequireJs and Grunt into a single file