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 数值，依次代表：
本文档主要讲述的是使用JSON进行网络数据交换传输；JSON（JavaScript ObjectNotation）是一种轻量级的数据交换格式，易于阅读和编写，同时也易于机器解析和生成，非常适合于服务器与客户端的交互。JSON采用与编程语言无关的文本格式，但是也使用了类C语言的习惯，这些特性使JSON成为理想的数据交换格式。 和 XML 一样，JSON 也是基于纯文本的数据格式。由于 JSON 天生是为 JavaScript 准备的，因此，JSON的数据格式非常简单，您可以用 JSON 传输一个简单的 St
- 生成代码中的列位置（relative column）
- sources 数组中的索引（源文件）
- 原始代码中的行号（0 起始）
- 原始代码中的列位置
- names 数组中的索引（可选，对应变量名）
这些数值采用可变长度量词（VLQ）编码，并用 Base64 表示。JavaScript 可借助开源库如 sourcemap-decode 或 source-map（Mozilla 提供）来解析 mappings。
例如使用 Mozilla 的 source-map 库：
const { SourceMapConsumer } = require('source-map');
const rawSourceMap = {
version: 3,
file: 'min.js',
names: ['add', 'a', 'b'],
sources: ['src/add.js'],
mappings: 'CAAC,IAAI,GAAG,aAAa'
};
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 编码复杂，但借助现有库可以轻松处理。关键是掌握其原理和使用场景。不复杂但容易忽略。
