JavaScript Source Map 简介

2019年8月26日 244次阅读 来源: weakish

为了进步机能，JavaScript一般须要经由过程紧缩和兼并以后才投入生产环境。假如运用CoffeeScript，还须要举行编译。

这就意味着，编辑的代码和运转的代码不一样。JavaScript的诠释器的报错信息的行数是针对天生的代码的，行数与本来的代码不对应，内部变量也改了名字。因而调试的时刻我们就会觉得茫然无措。

假如转换代码的时刻，我们能纪录原始代码和天生的代码行数间对应的关联，那该有多好啊。

Source map就是干这个。

有了它，调试的时刻将直接显现原始代码，而不是天生的代码。多方便！

《JavaScript Source Map 简介》

运用Source map

天生

运用Google家的closure compiler：

java -jar compiler.jar \ 
     --js script.js \
     --create_source_map ./script-min.js.map \
     --source_map_format=V3 \
     --js_output_file script-min.js

花样

Source map花样简单明了：

{
　version : 3,
　file: "out.js",
　sourceRoot : "",
　sources: ["foo.js", "bar.js"],
　names: ["src", "maps", "are", "fun"],
　mappings: "AAgBC,SAAQ,CAAEA"
}

version是 Source map 的版本，file是天生的文件，sourceRoot是原始代码地点的目次，留空示意统一目次。sources是原始代码，names是转换前的一切变量名和属性名。mappings决议原始文件和天生文件是怎样对应的，看上去不太直白，由于它运用了Base64 VQL编码。

启用

只需在天生的代码的尾部加上指向source map文件位置的一行就能够了：

//@ sourceMappingURL=/path/to/script-min.js.map

假如你喜好在代码尾部加解释，你也能够为天生的JavaScript指定一个迥殊的header：

X-SourceMap: /path/to/script-min.js.map

调试

新版的Google Chrome的Developer tools和Firefox的Firebug都支撑。个中，Firefox是默许开启的。

CoffeeScript

CoffeeScript 1.6.1以上版本支撑 source map。只需在编译时加上-m参数即可。

    原文作者：weakish
    原文地址: https://segmentfault.com/a/1190000000360514
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞