SourceMap mappings解析

源映射格式

{
  version: 3, //Source Map(源映射)的版本号，目前统一使用版本 3
  file: 'min.js', // (可选)生成文件的路径(相对于 Source Map(源映射) 本身路径)
  names: ['bar', 'baz', 'n'], // (可选)所有名称，如变量名、函数名
  sourceRoot: 'http://example.com/www/js/', // (可选)所有源文件的根路径(相对于 Source Map(源映射) 本身路径)
  sources: ['one.js', 'two.js'], //所有源文件的路径(相对于 sourceRoot)
  sourcesContent: ['', ''], //(可选)所有源文件的内容
  mappings: 'CAAC,IAAI,IAAM,SAAUA,GAClB,OAAOC,IAAID;CCDb,IAAI,IAAM,SAAUE,GAClB,OAAOA' //所有映射点
}

所有地址可以是 http:// 开头的网址或者是本地文件地址。

下面着重介绍mappings

mappings 是一个数组通过一定的方式编码Base64 VLQ得到的。
结构如下：

mappings = [
[ [生成文件的列，源文件索引，源文件行号，源文件列号，名称索引], ...], // 第1行第1个映射点，第1行第2个映射点， ...
[ [生成文件的列，源文件索引，源文件行号，源文件列号，名称索引], ...] // 第2行第1个映射点，第2行第2个映射点， ...
]

映射点的三种情况：
[生成文件的列]
[生成文件的列，源文件索引，源文件行号，源文件列号]
[生成文件的列，源文件索引，源文件行号，源文件列号，名称索引]

源映射所有的行列号都是从0开始计数的。

mappings: [
  [],   //第0行
  [],   //第1行
  [     //第2行
    [1,0,2,5,1],
    [4,0,3,6,0]
    //包含了5个数字，分别表示
    // 4 生成文件的列
    // 0 源文件索引
   //  3 源文件行号
   //  6 源文件列号
   //  0 名称索引
  ]
]

sourceMappings.jpeg