如何用Gulp结合TypeScript多文件生成单文件并解决TS6131错误？

我完全理解你的需求：想保留拆分TS文件的模块化开发方式（不提前合并），同时编译出浏览器可用的UMD单文件，而不是先合并TS再编译（那样确实会增加开发复杂度）。下面针对你遇到的TS6131错误，给出两种可行的解决方案：

错误原因分析 #

你遇到的Cannot compile modules using option 'outFile' unless the '--module' flag is 'amd' or 'system'错误，是因为TypeScript的outFile选项仅支持amd或system这两种模块规范——这俩是少数支持将多个模块合并为单文件的规范。但我们目标是UMD（兼容AMD、CommonJS和全局变量），所以不能直接通过TS的outFile生成UMD，得换个思路。

方案一：先编译为AMD，再包裹为UMD #

这种方案基于你现有的gulp-typescript工作流，只需添加一步UMD包裹：

步骤1：安装依赖 #

首先安装用于包裹UMD的插件：

npm install gulp-wrap --save-dev

步骤2：修改Gulp任务 #

调整TypeScript配置为amd模块，然后用gulp-wrap把编译后的AMD代码包裹成UMD格式：

const gulp = require('gulp');
const ts = require('gulp-typescript');
const wrap = require('gulp-wrap');

// 创建TypeScript项目配置
const tsProject = ts.createProject({
  target: 'ES5', // 根据你的需求调整目标版本
  module: 'amd', // 必须设置为amd才能使用outFile
  outFile: 'core-temp.js', // 先编译为临时AMD文件
  strict: true,
  skipLibCheck: true
});

gulp.task('compileCore', function () {
  return gulp.src('src/assets/test/v1/core/**/*.ts')
    // 编译TS为AMD单文件
    .pipe(tsProject())
    .js
    // 包裹为UMD格式
    .pipe(wrap(`(function(root, factory) {
      if (typeof define === 'function' && define.amd) {
        // AMD环境
        define([], factory);
      } else if (typeof module === 'object' && module.exports) {
        // CommonJS/Node环境
        module.exports = factory();
      } else {
        // 浏览器全局环境
        root.MyCoreLib = factory();
      }
    }(typeof self !== 'undefined' ? self : this, function() {
      <%= contents %>
      // 暴露你的核心内容（根据index.ts的实际导出调整）
      return { something: something };
    }));`))
    .pipe(gulp.dest('build/assets/test/v1/core/'));
});

注意点 #

• 最后返回的对象要和你index.ts里的实际导出对应（比如如果index.ts有export const something = ...，就返回对应的变量）。
• 临时文件core-temp.js会被包裹后的最终文件覆盖，无需额外清理。

方案二：用Rollup直接生成UMD（更推荐） #

Rollup是专门为模块打包设计的工具，天生支持ES模块合并，并且可以直接输出UMD格式，完全避开TS的outFile限制，工作流更简洁：

步骤1：安装依赖 #

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

步骤2：修改Gulp任务 #

const gulp = require('gulp');
const rollup = require('gulp-rollup');
const typescript = require('rollup-plugin-typescript2');

gulp.task('compileCore', function () {
  return gulp.src('src/assets/test/v1/core/index.ts')
    .pipe(rollup({
      input: 'src/assets/test/v1/core/index.ts', // 入口文件
      plugins: [
        // 处理TypeScript编译
        typescript({
          tsconfig: './tsconfig.json' // 可以复用你的TS配置文件
        })
      ],
      output: {
        file: 'build/assets/test/v1/core.js', // 输出路径
        format: 'umd', // 指定输出格式为UMD
        name: 'MyCoreLib', // 浏览器全局环境下的变量名（比如window.MyCoreLib）
      }
    }))
    .pipe(gulp.dest('.'));
});

优势 #

• 无需手动写UMD包裹代码，Rollup自动生成兼容多环境的UMD代码。
• 打包后的代码更精简（Rollup会做Tree Shaking，移除未使用的代码）。
• 完全保留模块化开发方式，拆分的TS文件正常导入导出即可。

最终选择建议 #

如果你想尽量沿用现有的Gulp+TypeScript工作流，方案一适合你；如果追求更简洁的配置和更优的打包结果，方案二是更好的选择——现在大多数前端库的UMD打包都是用Rollup完成的。

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