Source map 是一种记录压缩或编译后 javaScript 代码与原始源码位置映射关系的 jsON 文件，便于调试。它包含 version、sources、names、sourceRoot、mappings 和 file 等字段，其中 mappings 使用 Base64 VLQ 编码描述代码行、列、文件及变量名的对应关系，浏览器通过 sourceMappingURL 加载 .map 文件，结合开发者工具还原原始代码结构，支持断点调试。可通过 webpack、typescript、Babel 等工具配置生成。
Source Map 是开发 javascript 时非常有用的调试工具，尤其在代码经过压缩、混淆或由 TypeScript/Babel 等工具编译后。它建立了压缩代码与原始源码之间的映射关系，让开发者能在浏览器中直接调试原始代码。下面是对 JavaScript Source Map 的解析说明。
什么是 Source Map
Source Map 是一个 json 文件（通常以 .map 结尾），记录了转换后的代码（如 minified 或 transpiled 代码）与原始源代码之间的位置对应关系。当浏览器加载了带有 source map 注释的 JS 文件时，开发者工具可以还原出原始文件结构和代码行数，便于断点调试。
例如，压缩后的代码可能只有一行，但通过 source map 浏览器能显示对应的 .ts 或 .jsx 文件，并正确指向原始行号和列号。
Source Map 文件结构
一个典型的 source map 文件包含以下关键字段：
立即学习“Java免费学习笔记（深入）”；
- version：目前通常是 3，表示 Source Map V3 格式。
- sources：原始源文件路径数组，如 [“src/main.ts”, “src/utils.ts”]。
- names：代码中变量名和函数名的列表，用于映射符号名称。
- sourceRoot：源文件的根路径，用于定位 sources 中的相对路径。
- mappings：最关键的字段，使用 Base64 VLQ 编码存储了生成代码与源代码之间的位置映射。
- file：生成的 JavaScript 文件名。
mappings 字符串是按行记录的，每行描述了压缩代码中的哪些部分对应原始文件中的哪一行、列、以及属于哪个变量名。它的编码方式紧凑，节省空间。
如何解析 mappings 字段
mappings 字符串由分号（;）分隔每一行，逗号（,）分隔同一行内的多个映射段。每个段使用 Base64 解码后得到 1 到 5 个 VLQ 数值，依次代表：
- 生成代码中的列位置（relative column）
- sources 数组中的索引（源文件）
- 原始代码中的行号（0 起始）
- 原始代码中的列位置
- names 数组中的索引（可选，对应变量名）
这些数值采用可变长度量词（VLQ）编码，并用 Base64 表示。JavaScript 可借助开源库如 sourcemap-decode 或 source-map（Mozilla 提供）来解析 mappings。
例如使用 Mozilla 的 source-map 库：
const { SourceMapConsumer } = require('source-map'); <p>const rawSourceMap = { version: 3, file: 'min.js', names: ['add', 'a', 'b'], sources: ['src/add.js'], mappings: 'CAAC,IAai,GAAG,aAAa' };</p><p>SourceMapConsumer.with(rawSourceMap, null, consumer => { console.log(consumer.originalPositionFor({ line: 1, column: 0 })); // 输出 { source: 'src/add.js', line: 1, column: 0, name: null } });
如何启用 Source Map
在构建项目时，确保打包工具生成 source map：
- Webpack：配置 devtool: ‘source-map’ 或 ‘cheap-module-source-map’。
- TypeScript：在 tsconfig.json 中设置 “sourceMap”: true。
- Babel：输出时添加 sourceMaps: true 选项。
最终的 JS 文件末尾会加上注释：
// # sourceMappingURL=min.js.map
浏览器会自动请求同目录下的 .map 文件进行解析。
基本上就这些。理解 source map 的结构和解析方式，有助于排查构建问题或实现自定义调试工具。虽然 mappings 编码复杂，但借助现有库可以轻松处理。关键是掌握其原理和使用场景。不复杂但容易忽略。