JavaScript Source Map 简介

2019年8月28日 207次阅读 来源: 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
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞