如何从编译并压缩后的TypeScript代码中生成高质量的源映射（Source Maps）

阿华AIGC实验室

2026-4-8

你现在的问题根源其实出在两个关键地方：Rollup插件的执行顺序搞反了，还有部分源映射相关的配置没跟上。我帮你一步步梳理清楚，调整后就能得到能精准映射回原始TypeScript代码的源文件了：

1. 先修正Rollup插件的执行顺序

Rollup的插件是按数组顺序依次执行的，你现在把terser（压缩工具）放在typescript转译插件前面，相当于还没把TS转成JS，就先拿Terser去处理TS文件了——这完全不对！Terser只懂JS，正确的逻辑应该是：先把TS转成带源映射的JS，再用Terser压缩JS并基于上游的源映射生成最终的映射文件。

所以插件数组的顺序必须调换：

plugins: [
  typescript(), // 第一步：把TS转译为带源映射的JS
  terser({ /* 你的Terser配置 */ }) // 第二步：基于转译后的JS+源映射，生成压缩代码和最终源映射
]

2. 给TypeScript插件补全源映射配置

默认情况下@rollup/plugin-typescript可能没有完全开启源映射关联，你需要显式配置它生成能关联回原始TS文件的源映射，同时最好指定tsconfig.json的路径避免自动推断出错：

typescript({
  sourceMap: true, // 强制生成TS转JS的源映射
  inlineSources: true, // 可选：把原始TS源码内联到源映射中，调试时无需额外加载外部TS文件
  tsconfig: './tsconfig.json' // 显式指定项目的tsconfig文件
})

同时记得检查你的tsconfig.json，确保这些关键配置是开启的：

{
  "compilerOptions": {
    "sourceMap": true,
    "inlineSourceMap": false, // 不要开这个，让Rollup统一处理源映射逻辑
    "declaration": true, // 可选，如果你需要生成类型声明文件
    "declarationMap": true // 可选，让类型声明文件也能映射回原始TS
  }
}

3. 优化Terser配置以保留源映射完整性

Terser默认会继承上游的源映射，但你可以加个配置确保它把原始TS的信息保留在最终的源映射里：

terser({
  format: {
    max_line_len: 511 // 保留你原来的行长度限制
  },
  sourcemap: {
    includeSources: true // 确保最终源映射包含原始TS源码的引用
  }
})

修改后的完整Rollup配置

把上面的调整整合后，你的rollup.config.js应该是这样的：

const terser = require('@rollup/plugin-terser');
const typescript = require('@rollup/plugin-typescript');
const pkg = require('./package.json');

module.exports = [{
  input: 'src/index.ts',
  output: [
    { file: pkg.browser, sourcemap: true, format: 'umd', name: 'tbUtil' },
    { file: pkg.main, sourcemap: true, format: 'cjs' },
    { file: pkg.module, sourcemap: true, format: 'esm' }
  ],
  plugins: [
    typescript({
      sourceMap: true,
      inlineSources: true,
      tsconfig: './tsconfig.json'
    }),
    terser({
      format: {
        max_line_len: 511
      },
      sourcemap: {
        includeSources: true
      }
    })
  ]
}];