資料結構
網路
關係資料庫管理系統 (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+ 次瀏覽
