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

Question

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

1. MyClass1.ts

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

2. 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 block ，其中包含所有类的所有外部依赖项收集到。

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

1. 将所有 TypeScript 文件连接成一个文件并进行编译。问题:如何处理多个import语句(如上例中，MyClass1和MyClass2都依赖jquery)，导致TypeScript编译错误。
2. 单独编译每个文件，并将事后多个 define block 缩减为一个 block 。

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

Answer 1

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

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