JavaScript Source Map 簡介

爲了提升性能，JavaScript一般須要經過壓縮和合並以後才能投入生產環境。若是使用CoffeeScript，還須要進行編譯。

這就意味着，編輯的代碼和運行的代碼不同。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參數便可。