TAT.Perlt source map 版本 3 介绍
In JavaScript,Web开发 on 2014年01月20日 by view: 18,191
3

背景

source map 提案的作用在于可以在浏览器中的开发者工具 Closure Inspector 中像调试源代码一样地调试生成后的 Javascript 代码。

source map 是一个记录代码转换前和转换后的位置信息文件,利用 Closure Compiler 生成。

source map 经历了 3 个版本,第三版本的 source map 代码量大量减少。

术语

  • 生成后的代码: 指的是那些被编译器压缩过后的代码
  • 源代码:指的是没有被编译器压缩过的代码
  • VLQ:变量长度量,一个 base64 值。相应转换规则请点击链接
  • Source Mapping URL:生成后的代码的 source map 文件 URL 地址

版本 3 格式

特点

  • 减少代码量,减少了解析时间,减少内存消耗,减少下载时间
  • 利用双向映射,支持源代码级的调试
  • 支持反混淆

格式

  • 1.{
  • 2. "version":3,
  • 3. "file": "target.js",
  • 4. "sourceRoot": "",
  • 5. "sources":["map-test.js","map-test2.js"],
  • 6. "sourceContent": [null,null],
  • 7. "names":["a","b","c","d","global","global2","ss","aa","cc","dd","globa11l","globa2l2"],
  • 8. "mappings":"AAAAA,QAASA,EAAC,EAAE,EAEZC,QAASA,EAAC,EAAE,EAEZC,QAASA,EAAC,EAAE,EAOZC,QAASA,EAAC,EAAE,EAUZ,IAAIC,OAAO,CAAX,CACIC,QAAQ,C,CCtBZC,QAASA,GAAE,EAAE,EAEbC,QAASA,GAAE,EAAE,EAEbC,QAASA,GAAE,EAAE,EAObC,QAASA,GAAE,EAAE,EAUb,IAAIC,SAAS,CAAb,CACIC,SAAS;"
  • 9.}

target.js,map-test.js,map-test2.js,target.js.map

demo 文件,具体实际效果可下载到本地调试

第一行:source map 的 JSON 对象

第二行: version: 文件版本,必须是个正整数

第三行: file: 编译器生成后的文件

第四行: sourceRoot: 源文件相对路径。如果都在当前路径上,则为空

第五行: sources: 源文件列表

第六行: sourceContent: 源文件配置,当没有配置 source 的时候则使用这个

第七行: names: 变量列表

第八行: mappings: 映射表

mappings 数据结构如下:

  • 生成后的文件,每一行的映射片段块都会以分号 (;) 分隔开来
  • 每个片段以逗号 (,) 分隔
  • 每个片段是有 1,4 或 5 个变量长度的字段组成

片段代表着每个位置的映射,其中片段的每一个字段的含义:

  • 第一个值,代表这个位置开始于编译后文件的第几列
  • 第二个值,代表这个位置属于 sources 中的哪个文件
  • 第三个值,表示这个位置开始于源代码的第几行
  • 第四个值,代表这个位置开始于源代码的第几列
  • 第五个值,代表这个位置在于 names 中的哪个变量

编码类型

默认的编码类型为 UTF-8

压缩

source map 文件允许 GZIP 压缩

拓展

额外的字段可以被添加到 source map,用来提供拓展的功能,通常它们以"x_"开头。不过建议的命名规范是以域名为标准,举个例子, x_com_google_gwt_linecount

已知拓展

"x_google_linecount"- source map 行的数量

约定

Source Map 命名

通常来说,一个 source map 文件都会以源文件名作为文件吗,以".map"为拓展文件类型。举个例子,对于"page.js"源文件,source map 以"page.js.map"命名

链接生成后的文件和源文件

在生成后的文件的结尾加入如下代码,可以使生成后的文件和源文件进行链接:

//@ sourceMappingURL=target.js.map

例子: http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js

JSON 通过 HTTP 传输

通过重写 Array 构造器,直接利用 script src 引用一个 source map,可以造成 XSSI 攻击。而服务器可以通过在响应内容前面添加")]}"字符串可以有效的阻止 XSSI 攻击。

对于加载 sourcemap 文件,每次需要进行一次替换再转换为 JSON 对象,例子:

JSON.parse(aSourceMap.replace(/^)]}'/, ''))

source map 使用

编译命令

java -jar /tools/clourse-compiler/compiler.jar --js map-test.js map-test2.js --create_source_map ./target.js.map --source_map_format=V3 --js_output_file target.js

启用

Chrome 开发者工具中勾选 enable javascript source maps 开启。另外,如果想要生成后文件不支持 source map, 请去掉生成后的代码的 sourceMappingURL 注释

 

参考文档

原创文章转载请注明:

转载自AlloyTeam:http://www.alloyteam.com/2014/01/source-map-version-3-introduction/

  1. Yeon 2017 年 11 月 9 日

    demo 访问 404 哦~

  2. anonymous 2016 年 7 月 11 日

    Source Maps 版本源文件变量名映射 映射后的 Base64 值目标文件 jquery-3.0.0.min .map 格式分析

  3. anonymous 2016 年 7 月 11 日

    { “version”:3, “sources”:[“jquery.js”], “names”:[“global”,”factory”,”module”,…,”_jQuery”,”_$”,”$”,”noConflict”], “mappings”:”; CAaE,SAAUA,EAAQC,GAEnB,…,OAAS9B,EAAO6pC,EAAI/nC,GAIrBA”, “file”:”jquery.min.js” } 文章好像有问题?

发表评论