Source Map簡介

部署JavaScript腳本之前，開發(fā)者通常會使用UglifyJS2等工具對代碼壓縮變換。

為什么需要轉(zhuǎn)換代碼？

• 壓縮，減小體積。比如jQuery 1.9的源碼，壓縮前是252KB，壓縮后是32KB。
• 多個文件合并，減少HTTP請求數(shù)。
• 其他語言編譯成JavaScript。最常見的例子就是CoffeeScript。

什么是Source Map?

Source Map是一個JSON文件，其中包含了代碼轉(zhuǎn)換前后的位置信息。給定一個轉(zhuǎn)換之后的壓縮代碼的位置，就可以通過Source Map獲取轉(zhuǎn)換之前的代碼位置，反過來也一樣。

Source Map有哪些屬性？

• version：Source Map的版本號。
• file：轉(zhuǎn)換后的文件名。(可選)
• sourceRoot：轉(zhuǎn)換前的文件所在的目錄。如果與轉(zhuǎn)換前的文件在同一目錄，該項為空。(可選)
• sources：轉(zhuǎn)換前的文件列表。
• sourcesContent: 轉(zhuǎn)換前的文件內(nèi)容列表，與sources列表依次對應。(可選)
• names：轉(zhuǎn)換前的所有變量名和屬性名。
• mappings：記錄位置信息的字符串，經(jīng)過編碼。

參考鏈接

• Source Map入門教程
• JavaScript Source Map 詳解
• Source Map Revision 3 Proposal