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

Compiling TypeScript with RequireJs and Grunt into a single file

本文关键字：单个 文件 编译 TypeScript RequireJs Grunt 使用      更新时间：2023-09-26

我们正试图优化由许多文件组成的TypeScript项目，方法是使用Grunt将其编译为一个支持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 ...

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

我们正在寻找的是一种连接所有TypeScript文件的方法，使它们捆绑所需的所有导入，并包括一个具有对所收集的所有类的所有外部依赖关系的单个define块。

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

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

有人解决了这个问题吗？使用Grunt/request处理具有外部依赖关系的多个文件的最佳做法是什么？是否有任何实用程序允许我们重构TypeScript以处理多个导入（类似于C#的Roslyn）？

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

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

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

相关文章：