TypeScript 如何将多个typescript文件编译为单个输出js文件

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

我们将首先看一下如何使用TypeScript编译器将多个TypeScript文件编译成单个JavaScript文件，然后再看一下如何使用Webpack将多个TypeScript文件打包成单个JavaScript文件。

使用tsc编译多个TS文件为单个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

现在，将上面的配置选项复制到 tsconfig.json 文件中，修改 outFile 值为 out/bundle.js

同时，将以下代码粘贴到相应的文件中 −

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中运行这些模块，我们首先需要将其转换为Node.js可以理解的格式，可以使用webpack或者rollup打包工具来完成。这就是使用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文件的。 将 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可以生成几乎所有类型的JS模块，如 commonjs ，但配置更复杂。根据项目需求可以选择其中任何一种方法。