如何将TypeScript模块编译为JavaScript原生代码而非运行时导入？

需求说明 #

在TypeScript开发中，将代码拆分为单个函数独立文件（通过TS模块管理），但要求编译后的JavaScript文件无运行时导入语句，所有模块内容被直接合并为原生代码。例如：

示例输入（app.ts） #

type ArbitraryAttribute = any //can refer to any value valid at runtime

declare interface App {
    get? (key: string): ArbitraryAttribute | void,
    set? (key: string, val: ArbitraryAttribute): void,
    helper?: AppHelper,
}

declare interface AppHelper {
    deepGetter? (key: string): ArbitraryAttribute | void,
    deepSetter? (key: string, val: ArbitraryAttribute): void,
}

import { get } from "./get";
import { set } from "./set";
import { helper } from "./helper/index";

const app:App = {
    get,
    set,
    helper,
}

期望输出（app.js） #

var app = {
    get: function (key) {
        if (app.helper && app.helper.deepGetter) {
            return app.helper.deepGetter(key);
        };
    },
    set: function (key, val) {
        if (app.helper && app.helper.deepSetter) {
            app.helper.deepSetter(key, val);
        };
    },
    helper: {
        deepGetter: function (key) {
            // get anything
        },
        deepSetter: function (key, val) {
            // set anything
        },
    },
};

可行性与解决方案 #

该需求完全可行，以下是三种实现方案：

1. TypeScript原生编译（--outFile） #

TypeScript编译器支持将多个模块合并为单个文件，需注意以下配置：

• 将module设为amd或system（TS仅支持这两种模块格式的合并）
• 通过outFile指定输出文件路径

示例tsconfig.json：

{
  "compilerOptions": {
    "module": "amd",
    "outFile": "./dist/app.js",
    "target": "ES5",
    "strict": true
  },
  "include": ["src/**/*"]
}

编译后所有导入的模块会被合并到输出文件中，若需要完全去除模块包装，可配合后续工具进一步处理。

2. 使用Rollup打包 #

Rollup对ES模块的合并支持更灵活，可直接输出无模块包装的代码：

• 安装依赖：rollup、@rollup/plugin-typescript、typescript
• 配置rollup.config.js：

import typescript from '@rollup/plugin-typescript';

export default {
  input: 'src/app.ts',
  output: {
    file: 'dist/app.js',
    format: 'iife', // 立即执行函数格式，无运行时导入
    name: 'app' // 暴露到全局的变量名
  },
  plugins: [typescript()]
};

执行rollup -c即可生成符合期望的单文件代码，所有函数会被内联到最终的app对象中。

3. Webpack配置优化 #

通过Webpack的library配置，将输出打包为全局变量，去除模块导入逻辑：

• 安装依赖：webpack、webpack-cli、ts-loader、typescript
• 配置webpack.config.js：

module.exports = {
  entry: './src/app.ts',
  output: {
    filename: 'app.js',
    library: 'app', // 全局变量名
    libraryTarget: 'var' // 以全局变量形式暴露
  },
  module: {
    rules: [
      {
        test: /\.ts$/,
        use: 'ts-loader',
        exclude: /node_modules/
      }
    ]
  },
  resolve: {
    extensions: ['.ts', '.js']
  },
  optimization: {
    minimize: false // 可选：关闭压缩以保留代码结构
  }
};

执行webpack即可生成无运行时导入的单文件代码。

内容的提问来源于stack exchange，提问作者BzB