数据结构
网络
关系数据库管理系统 (RDBMS)
操作系统
Java
MS Excel
iOS
HTML
CSS
Android
Python
C语言编程
C++
C#
MongoDB
MySQL
Javascript
PHP
物理学
化学
生物学
数学
英语
经济学
心理学
社会学
服装设计
法学如何将多个TypeScript文件编译成单个输出JS文件？
TypeScript是JavaScript的强类型超集，它编译成纯JavaScript。TypeScript向语言添加了静态类型检查、类和接口，使编写和维护大型应用程序更容易。TypeScript文件编译成JavaScript文件，可以在任何支持JavaScript的浏览器或服务器中运行。本文将探讨如何将多个TypeScript文件编译成单个输出js文件。
我们将首先探讨如何使用TypeScript编译器编译多个TypeScript文件，然后学习如何使用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文件编译成单个JavaScript文件，该文件位于"out/bundle.js"。
示例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生成的JS文件几乎支持所有模块类型，例如commonjs，但配置更复杂。可以根据项目需要选择这两种方法中的任何一种。
4K+ 次浏览
