如何将多个.ts文件合并成一个.js文件

TypeScript是一种流行的编程语言，是JavaScript的严格语法扩展，为语言添加了可选的静态类型和基于类的面向对象编程。在处理大型项目时，将代码分成多个.ts文件以便更容易管理和维护是很常见的。然而，当部署应用程序时，您可能希望将这些.ts文件合并成一个.js文件，以获得更好的性能和更简便的部署。在本教程中，我们将学习如何使用TypeScript编译器将多个.ts文件合并成一个.js文件。我们将通过在编译器选项中指定outFile来实现这一目标。

让我们逐步实现理解。

安装TypeScript编译器： 在将.ts文件合并成一个.js文件之前，您需要安装TypeScript编译器。TypeScript编译器是一个命令行工具，允许您将.ts代码转译为.js代码。要安装TypeScript编译器，您需要在系统上安装Node.js和npm（Node.js包管理器）。

步骤1： 要安装TypeScript编译器，请打开一个终端窗口并运行以下命令：

npm install -g typescript

这将在您的系统上全局安装TypeScript编译器，使您可以在任何项目中使用它。

步骤2： 安装了TypeScript编译器后，您可以使用它将.ts文件编译为一个.js文件。为此，您需要在项目的根目录中创建一个名为tsconfig.json的TypeScript配置文件。此文件将包含TypeScript编译器的配置选项，包括要编译的.ts文件列表和其他必要选项。

项目结构：

这是一个示例 tsconfig.json 文件，它将src目录中的所有.ts文件合并为一个名为bundle.js的.js文件：

{
    "compilerOptions": {
           "outFile": "bundle.js",
           "allowJs": true,
           "checkJs": true,
           "declaration": true,
           "sourceMap": true,
           "noImplicitAny": true,
           "module": "amd",
           "target": "es5"
     },
     "include": [
           "src/**/*"
     ],
     "exclude": [
           "node_modules"
     ]
}

步骤3： 在此示例中，compilerOptions对象包含TypeScript编译器的配置选项。outFile选项指定输出的.js文件的名称，include选项指定要包含在编译中的.ts文件。exclude选项指定要从编译中排除的目录或文件。请注意，module设置为amd，因为对于要捆绑的文件，不支持CommonJS。让我们在src目录中创建两个文件one.ts和two.ts，如下所示：

one.ts

console.log("First file")

two.ts

console.log("Two")

ts文件内容

第四步： 使用TypeScript编译器将.ts文件编译为单个.js文件，打开终端窗口并导航到项目的根目录。然后，运行以下命令：

tsc

如果这样行不通，tsc可能不在PATH中，所以我们可以使用

npx tsc

这将运行TypeScript编译器，并创建在tsconfig.json文件中指定的输出.js文件。

第五步： 一旦使用TypeScript编译器将.ts文件编译为单个.js文件，您可以将输出.js文件添加到项目中。为此，您需要在HTML文件中包含.js文件，或在JavaScript代码中引用它。例如，如果您有一个名为index.html的HTML文件，您想要包含名为bundle.js的输出.js文件，您可以将以下脚本标签添加到HTML文件中：

<script src="bundle.js"></script>

这将在HTML文件中包含bundle.js文件，在页面加载时执行。

带有捆绑js文件的index.html文件

输出： 在Web浏览器中运行index.html文件后，我们在控制台中获得以下输出：

* 说明： 我们已经看到如何使用TypeScript编译器将多个.ts文件合并成一个.js文件。通过创建一个tsconfig.json文件并运行tsc命令，我们能够将我们的.ts代码转译成一个单独的.js文件，以便更容易部署和获得更好的性能。我们还学会了如何在我们的HTML文件中包含输出的.js文件或在我们的JavaScript代码中引用它。

阅读更多：JavaScript 教程