[TypeScript] 第1550天 如何将多个ts文件合并为一个js文件？

[haizhilin2013]

第1550天 如何将多个ts文件合并为一个js文件？

3+1官网

我也要出题

[llccing]

将多个 TypeScript 文件合并为一个 JavaScript 文件，通常通过 TypeScript 编译器（tsc）和模块打包工具（如 webpack 或 Rollup）来实现。以下是几种常见的方法：

方法 1: 使用 tsc 和 outFile 选项

TypeScript 编译器自带一个 outFile 选项，可以将所有的输入文件合并为一个输出文件。但这种方法仅适用于 module 选项为 amd 或 system 的情况下。

配置 tsconfig.json

首先，创建或更新 tsconfig.json 文件，设置 outFile 选项：

{
  "compilerOptions": {
    "target": "es5",                 // 指定 ECMAScript 目标版本
    "module": "amd",                 // 模块系统，可以是 'amd' 或 'system'
    "outFile": "./dist/bundle.js"    // 输出的单个 JavaScript 文件
  },
  "include": [
    "./src/**/*.ts"                  // 包含的 TypeScript 文件路径
  ]
}

编译项目

在项目根目录下运行 TypeScript 编译器命令：

tsc

这将根据 tsconfig.json 中的配置，将所有 TypeScript 文件合并并编译成一个 bundle.js 文件。

方法 2: 使用 webpack

Webpack 是一个功能强大的模块打包工具，可以将多个 TypeScript 文件打包成一个 JavaScript 文件。

安装 webpack 和 TypeScript 相关依赖

npm install --save-dev webpack webpack-cli ts-loader typescript

配置 webpack.config.js

在项目根目录下创建 webpack.config.js 文件：

const path = require('path');

module.exports = {
  entry: './src/index.ts',           // 入口文件
  module: {
    rules: [
      {
        test: /\.ts$/,
        use: 'ts-loader',
        exclude: /node_modules/
      }
    ]
  },
  resolve: {
    extensions: ['.ts', '.js']
  },
  output: {
    filename: 'bundle.js',           // 输出的单个 JavaScript 文件
    path: path.resolve(__dirname, 'dist')
  }
};

创建或更新 tsconfig.json

确保有一个 tsconfig.json 文件来配置 TypeScript 编译器：

{
  "compilerOptions": {
    "target": "es5",
    "module": "es6",
    "outDir": "./dist",
    "strict": true
  },
  "include": [
    "./src/**/*.ts"
  ]
}

打包项目

在项目根目录下运行 webpack 命令：

npx webpack --config webpack.config.js

这将根据 webpack 配置文件，将所有 TypeScript 文件打包成一个 bundle.js 文件。

方法 3: 使用 Rollup

Rollup 是一个模块打包工具，特别适用于打包库。

安装 Rollup 和 TypeScript 相关依赖

npm install --save-dev rollup rollup-plugin-typescript2 typescript

配置 rollup.config.js

在项目根目录下创建 rollup.config.js 文件：

import typescript from 'rollup-plugin-typescript2';

export default {
  input: './src/index.ts',             // 入口文件
  output: {
    file: './dist/bundle.js',          // 输出的单个 JavaScript 文件
    format: 'cjs'                      // 输出格式，可以是 'cjs', 'esm', 'iife', etc.
  },
  plugins: [
    typescript({ tsconfig: './tsconfig.json' })
  ]
};

创建或更新 tsconfig.json

确保有一个 tsconfig.json 文件来配置 TypeScript 编译器：

{
  "compilerOptions": {
    "target": "es5",
    "module": "es6",
    "outDir": "./dist",
    "strict": true
  },
  "include": [
    "./src/**/*.ts"
  ]
}

打包项目

在项目根目录下运行 Rollup 命令：

npx rollup -c

这将根据 Rollup 配置文件，将所有 TypeScript 文件打包成一个 bundle.js 文件。

总结

上述方法可以帮助你将多个 TypeScript 文件合并为一个 JavaScript 文件。对于简单的项目，可以使用 tsc 的 outFile 选项。对于更复杂的项目或需要更多打包功能的项目，使用 webpack 或 Rollup 会更加灵活和强大。