Source Map 工作原理

Web-FE
Catalogue
  1. 1. 简介
  2. 2. Source Map 提案
  3. 3. mappings 详解
  4. 4. 反解析示例
  5. 5. References

简介

Source Map 是前端开发中非常有用的一种文件，它提供了源码映射的机制，使开发人员能够在本地开发过程或者线上环境基于源码进行调试或者错误堆栈分析。

Source Map 提案

JavaScript、CSS 代码的 source map 是根据 Source Map Revision 3 Proposal（这个文档在谷歌 Docs 里，如果打不开，可以下载 PDF）这个提案来实现的。提案里用一句话描述其特点为“Better bidirectional mapping”，即“更好的双向映射”。

按照提案一个 sourceMap 文件的内容实际上是一个 JSON 对象：

1
2
3
4
5
6
7
8
9
{
  "version" : 3,
  "file": "out.js",
  "sourceRoot": "",
  "sources": ["foo.js", "bar.js"],
  "sourcesContent": [null, null],
  "names": ["src", "maps", "are", "fun"],
  "mappings": "A,AAAB;;ABCDE;"
}

下面我们逐行介绍每个字段的含义。

version

生成当前 sourcemap 时所遵从的提案（Source Map Revision）版本号，是个正整数。

file

An optional name of the generated code that this source map is associated with.

sourceRoot

An optional source root, useful for relocating source files on a server or removing repeated values in the “sources” entry. This value is prepended to the individual entries in the “source” field.

sources

源文件列表，后面的 mappings 字段会用到这个列表。

sourcesContent

可选。源文件的内容。

names

A list of symbol names used by the “mappings” entry.

mappings

字符串，编码后的数据。

mappings 详解

反解析示例

References

  1. vlq | github
  2. vlq | npm
  3. vlq | wikipedia
  4. source map 的原理探究
Share