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

Question

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

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语句放在我们的内部项目中，而不需要它们。< / p>

我们正在寻找的是一种连接所有TypeScript文件的方法，它们捆绑所需的所有导入，并且它们包含一个define块，所有外部依赖项都收集到所有类。< / p>

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

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

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

Answer 1

您可以使用systemjs在开发时加载模块，并systemjs builder将所有需要的文件捆绑到一个文件中。

Answer 2

你不应该使用--out，因为它试图找出依赖顺序，当你有外部依赖关系和AMD模块时它会填充+它在较大的项目中很慢而且实际上不可维护。

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