如何将几个 TypeScript 文件编译为单个输出 js 文件?

typescriptweb developmentfront end technology

TypeScript 是 JavaScript 的强类型超集，可编译为纯 JavaScript。TypeScript 为该语言添加了静态类型检查、类和接口，使编写和维护大型应用程序更加容易。TypeScript 文件被编译为 JavaScript 文件，可以在任何支持 JavaScript 的浏览器或服务器上运行。本文将介绍如何将多个 TypeScript 文件编译为单个输出 js 文件。

我们将首先了解如何使用 TypeScript 编译器编译多个 TypeScript 文件，然后了解如何使用 Webpack 将多个 TypeScript 文件打包为单个 JavaScript 文件。

使用 `tsc` 将多个 TypeScript 文件编译为单个 JS 文件

TypeScript 编译器是一个命令行工具，可用于将 TypeScript 代码编译为 JavaScript。要安装 TypeScript 编译器，请打开终端并运行以下命令 -

npm install -g typescript

接下来，我们需要在项目根目录中创建一个 tsconfig.json 文件。tsconfig.json 文件包含 TypeScript 编译器的配置选项。

以下是 tsconfig.json 文件的示例 -

{
   "compilerOptions": {
      "target": "ES2015",
      "outFile": "out/bundle.js",
      "module": "amd",
      "sourceMap": true,
   },
   "include": [
      "src/**/*.ts"
   ]
}

在此示例配置中，我们使用了 TypeScript 编译器，并带有 target、outFile、module、sourceMap 和 include 等选项。这些选项指定了 ECMAScript 版本(设置为 ES2015)、输出文件名(设置为 out/bundle.js)、模块系统(有两个选项 amd 或 system，设置为 amd)、源映射生成(设置为 true)以及编译时需要包含的文件。我们已指定 src 目录及其子目录中的所有文件都包含在编译中。

要编译我们的 TypeScript 代码，我们可以在终端中运行以下命令 -

tsc

这将把 "src" 目录及其子目录中的所有 TypeScript 文件编译为一个位于 "out/bundle.js" 的 JavaScript 文件。

示例 1

在本例中，我们将创建两个 TypeScript 文件，分别为 src/index.ts 和 src/app.ts。按照以下命令创建具有以下名称的空文件 -

$ touch src/app.ts src/index.ts
$ touch tsconfig.json

现在，我们将通过设置 tsconfig.json 来配置 TypeScript 编译器 -

touch tsconfig.json

现在，通过将 outFile 的值修改为 out/bundle.js，将上述配置选项粘贴到 tsconfig.json 文件中。

另外，将以下代码粘贴到相应的文件中 -

src/app.ts

export default interface Person {
   firstName: string, 
   lastName: string,
   sayHello(): void, 
}

此代码声明并导出一个名为 Person 的接口，该接口具有两个属性 firstName 和 lastName 以及一个方法 sayHello。

src/index.ts

import Person from "./app"
class Employee implements Person {
   firstName: string 
   lastName: string 

   constructor (firstName: string, lastName: string) {
      this.firstName = firstName,
      this.lastName = lastName
   }
   sayHello() {
      console.log(`Hello, ${this.firstName + this.lastName}`)
   }
}
const obj = new Employee("Aditya", "Singh")
obj.sayHello()

此文件导入已导出的 Person 接口，并在其上实现一个类。

现在，要编译所有这些文件(在本例中为两个文件)，请运行 -

tsc

输出

out/bundle.js

define("app", ["require", "exports"], function (require, exports) {
   "use strict";
   Object.defineProperty(exports, "__esModule", { value: true });
});
define("index", ["require", "exports"], function (require, exports) {
   "use strict";
   Object.defineProperty(exports, "__esModule", { value: true });
   class Employee {
      constructor(firstName, lastName) {
         (this.firstName = firstName), (this.lastName = lastName);
      }
      sayHello() {
         console.log(`Hello, ${this.firstName + " " + this.lastName}`);
      }
   }
   const obj = new Employee("Aditya", "Singh");
   obj.sayHello();
});
//# sourceMappingURL=bundle.js.map

将创建一个新的文件 out/bundle.js，其中包含一个已编译的 JS 文件。此已编译的 JS 文件包含 AMD(异步模块定义) 模块，为了在 Node.js 中运行这些模块，我们首先必须使用 webpack 或 rollup 打包器将其转换为 Node.js 可以理解的格式。这就是使用 tsc 将多个 TypeScript 文件编译为单个 TypeScript 文件的局限性。

使用 Webpack 将多个 TS 文件编译为单个 JS 文件

Webpack 是现代 Web 开发中流行的构建工具，可用于打包和优化 JavaScript 文件，但它也通过加载器内置了对 TypeScript 的支持。Webpack 在底层使用 tsc 来转译 .ts 文件。 ts-loader 用作 webpack 和 tsc 之间的粘合剂。因此，您仍然需要 tsconfig.json 文件。

示例 2

我们将在之前的示例基础上，使用 webpack 将之前创建的两个 TypeScript 文件编译成一个 JS 文件。

要使用 webpack 将 TS 文件转换为 JS 文件，您需要安装必要的依赖项，包括 webpack、webpack-cli 和 ts-loader −

npm install webpack webpack-cli ts-loader

安装这些依赖项后，您可以在项目目录中创建 Webpack 配置文件 webpack.config.js。以下是一个示例配置文件 -

配置文件 (webpack.config.js) -

const path = require('path');
module.exports = {
   entry: './src/app.ts',
   mode: 'development',
   devtool: 'inline-source-map',
   watch: true,
   output: {
      filename: 'bundle.js',
      path: path.resolve(__dirname, 'dist'),
   },
   resolve: {
      extensions: ['.ts', '.js'],
   },
   module: {
      rules: [
         {
            test: /\.ts$/,
            use: 'ts-loader',
            exclude: /node_modules/,
         },
      ],
   },
};

在此配置文件中，entry 属性指定应用程序的入口点，它是一个 TypeScript 文件(本例中为 app.ts)。mode 属性指定构建模式(本例中为 development)，devtool 属性指定源映射类型。output 属性指定输出文件名和目录，resolve 属性指定要解析的文件扩展名。最后，module 属性指定了不同文件类型的加载器，包括用于 TS 文件的 ts-loader。

将 watch 选项设置为 true，指定 Webpack 在后台运行，并在 .ts 文件中检测到已保存的更改时自动编译。

要编译所有 .ts 文件(在本例中为 src/index.ts 和 src/app.ts)，我们只需运行以下命令:-

npx webpack

这将创建一个包含单个打包 .js 文件的 dist/bundle.js 文件。

输出

将创建一个新的文件 dist/bundle.js，您可以在使用 −

构建 Node.js 环境

node dist/bundle.js

在终端中，您将看到以下输出:−

Hello, Aditya Singh

总结

我们讨论了将多个 TypeScript 文件编译为单个 JavaScript 文件的两种方法——使用 TypeScript 编译器或使用 Webpack。TypeScript 编译器简单易用，只需极少的配置，但仅限于 AMD 和 system 模块。同时，Webpack 几乎可以在所有模块类型(例如 commonjs)中生成 JS 文件，但配置起来更复杂。您可以根据项目需求选择这两种方法中的任意一种。