一、Source map的格式
- source map的格式大概长这个样子, 每个字段都表示了map文件的关键信息
{
version : 3,
file: "out.js",
sourceRoot : "",
sources: ["foo.js", "bar.js"],
names: ["src", "maps", "are", "fun"],
mappings: "AAgBC,SAAQ,CAAEA"
}
-
source map主要有以下几个属性
- version: source map的版本
- file: 转换后的文件名
- sourceRoot: 转换前的文件所在目录,默认为空,表示同级目录
- sources: 待转换的文件,是个数组形式,可以看出它可以合并多个js文件
- names: 转换前的所有变量名和属性名
- mappings: 记录位置信息的字符串
-
mappings属性
记录着两个文件关联关系的关键信息。
- 第一层是行对应，以分号（;）表示，每个分号对应转换后源码的一行。所以，第一个分号前的内容，就对应源码的第一行，以此类推。
- 第二层是位置对应，以逗号（,）表示，每个逗号对应转换后源码的一个位置。所以，第一个逗号前的内容，就对应该行源码的第一个位置，以此类推。
- 第三层是位置转换，以VLQ编码表示，代表该位置对应的转换前的源码位置。
mappings:"AAAAA,BBBBB;CCCCC" ，转换后的源码分成两行，第一行有两个位置，第二行有一个位置。
