什么是 sourcemap
sourcemap 是关联编译后的代码和源码的，通过一个个行列号的映射。
比如编译后代码的第 3 行第 4 列，对应着源码里的第 8 行第 5 列这种，这叫做一个 mapping。
sourcemap 的格式如下：
{
version : 3,
file: "out.js",
sourceRoot : "",
sources: ["foo.js", "bar.js"],
names: ["a", "b"],
mappings: "AAgBC,SAAQ,CAAEA;AAAEA",
sourcesContent: ['const a = 1; console.log(a)', 'const b = 2; console.log(b)']
}
- version：sourcemap 的版本，一般为 3
- file：编译后的文件名
- sourceRoot：源码根目录
- names：转换前的变量名
- sources：源码文件名
- sourcesContent：每个 sources 对应的源码的内容
- mappings：一个个位置映射
构建后一个 bundle.js 就对应了 n 个 sources 源文件所以sources可以有多个。
mappings 部分是通过分号; 和逗号 , 分隔的：
mappings:"AAAAA,BBBBB;CCCCC"
一个分号就代表一行，这样就免去了行的映射。
然后每一行可能有多个位置的映射，用 , 分隔。
比如 AAAAA 一共五位，分别有不同的含义：
- 转换后代码的第几列（行数通过分号 ; 来确定）
- 转换前的哪个源码文件，保存在 sources 里的，这里通过下标索引
- 转换前的源码的第几行
- 转换前的源码的第几列
- 转换前的源码的哪个变量名，保存在 names 里的，这里通过下标索引
然后经过VLQ 编码之后，就成了 AAAAA 。
各种调试工具一般都支持 sourcemap 的解析，只要在文件末尾加上这样一行：
//# sourceMappingURL=/path/to/source.js.map
运行时就会关联到源码：
