Source Map

字段

1. version字段

   • 含义：这个字段用于指定源映射（source map）所遵循的规范版本。源映射规范是一个标准，它定义了如何将压缩或转换后的代码（如在生产环境中的 JavaScript 代码）与原始的、未处理的源代码相关联。不同的版本可能会有不同的规则和格式细节。
   • 示例：如果version字段的值为3，这意味着这个源映射文件是按照版本 3 的源映射规范来构建的，当工具（如浏览器的开发者工具）解析这个源映射时，就会根据版本 3 的规则来进行操作，以正确地将代码映射回原始源代码。

2. sources字段

   • 含义：这是一个包含原始源文件 URL 的数组。这些 URL 指向了生成压缩或转换后代码的原始文件。例如，在 JavaScript 开发中，当代码经过构建工具（如 Webpack）的压缩和打包后，sources数组中的 URL 可以帮助定位那些未被压缩的原始 JavaScript 文件。
   • 示例：如果你的项目中有两个原始 JavaScript 文件main.js和util.js，sources数组可能包含类似于["/src/main.js", "/src/util.js"]的内容，其中的路径是相对于项目的某种根目录定义的。

3. names字段

   • 含义：这是一个可以被各个映射（mappings）引用的标识符数组。在源映射的过程中，这些标识符用于在原始代码和转换后的代码之间建立更详细的关联。例如，它们可能代表函数名、变量名等在映射过程中有特殊用途的名称。
   • 示例：假设原始代码中有一个函数function addNumbers(a, b)，在源映射过程中，addNumbers这个名称可能会被包含在names数组中，并且通过mappings字段中的信息来确定在转换后的代码中该函数对应的位置和相关信息。

4. sourceRoot字段

   • 含义：这个字段是可选的。它定义了所有sources相对的 URL 根目录。如果提供了这个字段，sources中的 URL 就是相对于这个sourceRoot来计算的。这有助于在组织源文件时有一个统一的根路径参考，特别是当源文件存储在不同的目录结构中或者通过不同的方式引用时。
   • 示例：如果sourceRoot的值为"/project/src"，sources中的一个元素为"main.js"，那么实际的源文件位置可能被认为是"/project/src/main.js"。

5. sourcesContent字段

   • 含义：这个字段也是可选的。它是一个包含原始源文件内容的数组。如果提供了这个字段，它可以直接提供原始文件的内容，这对于一些工具在无法通过sources中的 URL 获取原始文件内容的情况下（例如，由于网络问题或者文件权限问题），仍然能够进行源映射的分析和展示非常有用。
   • 示例：假设sources中有一个文件main.js，sourcesContent数组中对应位置可能包含main.js的实际代码内容，如["function add(a, b) { return a + b; }"]。

6. mappings字段

   • 含义：这是一个以 Base64 VLQ（Variable - Length Quantity）编码的字符串，它包含了实际的映射信息。VLQ 是一种用于有效存储可变长度整数的数据编码方式。在源映射中，mappings字符串用于精确地描述转换后的代码与原始代码之间的字符、行、列等位置关系。这种复杂的编码方式可以在紧凑的字符串中存储大量的映射信息。
   • 示例：一个mappings字符串可能看起来像一堆难以理解的字符（因为是 Base64 编码），但它实际上是在描述如何从转换后的代码位置找到对应的原始代码位置，比如某个转换后代码中的字符是如何与原始代码中的字符相对应的。

7. file字段

   • 含义：这个字段是可选的。它用于指定与这个源映射相关联的生成文件名。例如，在一个构建过程中，可能会生成一个名为bundle.js的压缩后的 JavaScript 文件，同时生成一个对应的源映射文件，这个源映射文件的file字段可能会被设置为"bundle.js"，以表明它是与bundle.js相关联的源映射。

示例 （vite构建工具）

源文件内容：

let a = 1
console.log(a)

输入目录：

输出目录：

生成的sourcemap文件：

{"version":3,"file":"index-ePQ8ROXB.js","sources":["../../src/index.js"],"sourcesContent":["let a = 1\nconsole.log(a)"],"names":["a"],"mappings":"ssBAAA,IAAIA,EAAI,EACR,QAAQ,IAAIA,CAAC"}

version

构建source map使用的规范版本为3

file

与这个源映射相关联的生成文件名，通过vite构建工具，生成的导出文件是index-ePQ8ROXB.js，这个是和当前.map文件相关联的

sources

为最初的，生成该.map文件的源文件的路径

sourcesContent

原始文件的内容

names

函数名、变量名

mappings

描述转换后的代码与原始代码之间的字符、行、列等位置关系