TypeScript 编译生成的 SourceMap 核心作用是将运行时 JavaScript 代码精准回溯到原始 .ts 文件的位置和行号；它由 tsc 或 Webpack、Vite 等工具自动生成，通过 sources、names 和 Base64 VLQ 编码的 mappings 字段建立映射，配合 sourceMappingURL 注释被浏览器解析，实现源码级调试。
TypeScript 编译时生成的 SourceMap，核心作用是把运行时的 JavaScript 代码精准回溯到原始 .ts 文件的位置和行号。它不是手动处理的产物，而是由 tsc 或构建工具（如 Webpack、Vite）在编译阶段自动生成并关联的。
SourceMap 如何建立 TypeScript 到 JS 的映射
tsc 编译器读取 .ts 文件后，会：
- 输出对应的
.js文件（或内联到 JS 中） - 同时生成
.js.map文件（如index.js.map），其中包含三要素：-
sources：列出原始源文件路径（如["src/index.ts"]） -
names：记录变量/函数名（用于调试时显示原始标识符） -
mappings：Base64 VLQ 编码的列位置映射表，描述每行 JS 代码对应.ts中哪一行哪一列
-
浏览器开发者工具加载 .js 文件时，若发现末尾有 //# sourceMappingURL=index.js.map 注释，就会自动请求并解析该 map 文件，从而在「Sources」面板中显示 .ts 源码而非编译后的 JS。
立即学习“Java免费学习笔记（深入）”；
关键配置项（tsconfig.json）
{
"compilerOptions": {
"sourceMap": true,
"inlineSourceMap": false,
"inlineSources": false,
"outDir": "./dist",
"rootDir": "./src"
},
"include": ["src/**/*"]
}-
sourceMap: true：生成独立.js.map文件（推荐，利于部署分离） -
inlineSourceMap: true：把 map 内容直接 Base64 编码写进.js文件末尾（适合单文件场景） -
inlineSources: true（需配合inlineSourceMap）：把.ts源码也嵌入 map 中，调试时无需服务器提供.ts文件
常见问题与应对
断点不生效或跳转错位
检查outDir和rootDir是否匹配；确保sources路径在浏览器中可访问（开发时建议用sourceRoot: "./src"配合相对路径）线上环境看不到 TS 源码
生产构建通常禁用sourceMap或仅保留hidden-source-map（Webpack 场景）。若需调试，可上传.map和.ts到 sourcemap 服务（如 Sentry、Vercel）混合 JS/TS 项目中 JS 文件无映射
.js文件默认不生成 source map，除非显式配置compilerOptions.allowJs: true并启用sourceMap，且 JS 文件本身参与编译流程
构建工具中的补充说明
- Vite 默认开启
build.sourcemap: 'inline'，自动处理 TS 映射 - Webpack 需设置
devtool: 'source-map'或'inline-source-map'，并确保ts-loader或babel-loader正确传递 source map 信息
本质上，TypeScript 的 SourceMap 是编译链路的副产品，只要配置正确、路径可及、工具链支持，就能自然实现从执行代码到源码的双向定位。
