如何将多个TypeScript文件合并为无模块单JS文件？TS配置无效求助

我明白你的需求——把多个TypeScript文件合并成一个没有任何模块系统的单JS文件，用于Cosmos DB存储过程对吧？之前用tsconfig.json里的module: none加outFile没生成文件的问题，确实是因为TypeScript的outFile仅支持System或AMD模块系统，当你设置module: none时，编译器会把每个TS文件当作独立的全局脚本，不会处理模块导入导出，自然也不会生成合并后的文件。下面给你几个可行的解决方案：

方案一：调整代码为全局脚本 + 正确TS配置 #

如果愿意修改现有代码的导入导出逻辑，可以直接把所有函数暴露为全局变量，再用TS的合并功能：

1. 修改TS代码，移除import/export语句：

   // Main.ts
   function main() {
     console.log("main");
     foo();
   }
   
   // foo.ts
   function foo() {
     console.log("foo");
   }
   

2. 配置tsconfig.json：

   {
     "compilerOptions": {
       "module": "none",
       "outFile": "./out.js",
       "target": "ES5", // 适配Cosmos DB的运行环境
       "strict": true
     },
     "include": ["*.ts"]
   }
   

3. 运行tsc命令，就能生成你期望的无模块单文件out.js了。

方案二：用Rollup打包（无需修改TS模块代码） #

如果不想改动原有的import/export结构，可以用Rollup这类打包工具自动处理模块合并：

1. 安装依赖：

   npm install rollup rollup-plugin-typescript2 @rollup/plugin-node-resolve --save-dev
   

2. 创建rollup.config.js配置文件：

   import typescript from 'rollup-plugin-typescript2';
   import resolve from '@rollup/plugin-node-resolve';
   
   export default {
     input: 'Main.ts', // 入口文件
     output: {
       file: 'out.js',
       format: 'iife', // 生成立即执行函数，无外部依赖，适合单文件运行
       name: 'CosmosProc' // 可选，若需要全局访问函数可设置
     },
     plugins: [
       resolve(), // 解析模块导入
       typescript({ tsconfig: './tsconfig.json' }) // 处理TypeScript编译
     ]
   };
   

3. 调整tsconfig.json的模块配置为ES模块：

   {
     "compilerOptions": {
       "module": "ESNext",
       "target": "ES5",
       "strict": true
     }
   }
   

4. 运行打包命令：

   npx rollup -c
   

   生成的out.js会自动把所有TS模块合并为一个无模块的单文件，内部会处理原有的import/export逻辑，你可以直接在Cosmos DB存储过程中使用。

方案三：用Webpack打包（另一种可选工具） #

如果你更熟悉Webpack，也可以用它来实现：

1. 安装依赖：

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

2. 创建webpack.config.js：

   const path = require('path');
   
   module.exports = {
     entry: './Main.ts',
     module: {
       rules: [
         {
           test: /\.tsx?$/,
           use: 'ts-loader',
           exclude: /node_modules/,
         },
       ],
     },
     resolve: {
       extensions: ['.tsx', '.ts', '.js'],
     },
     output: {
       filename: 'out.js',
       path: path.resolve(__dirname),
       libraryTarget: 'var', // 输出为全局变量形式
       library: 'CosmosProc'
     },
     mode: 'development' // 生产环境可改为'production'
   };
   

3. 运行打包命令：

   npx webpack
   

   同样会生成符合要求的单文件JS。

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