JavaScript Source Map 詳解

JavaScript Source Map 詳解

Source Map。它是一個獨立的map檔案，與源碼在同一個目錄下，你可以點擊進去，看看它的樣子。

這是一個很有用的功能，本文將詳細講解這個功能。

一、從源碼轉換講起

JavaScript指令碼正變得越來越複雜。大部分源碼（尤其是各種函數庫和架構）都要經過轉換，才能投入生產環境。可以500%提高開發效率的前端UI架構！

常見的源碼轉換，主要是以下三種情況：

（1）壓縮，減小體積。比如jQuery 1.9的源碼，壓縮前是252KB，壓縮後是32KB。  （2）多個檔案合并，減少HTTP請求數。  （3）其他語言編譯成JavaScript。最常見的例子就是CoffeeScript。

這三種情況，都使得實際啟動並執行代碼不同於開發代碼，除錯（debug）變得困難重重。

通常，JavaScript的解譯器會告訴你，第幾行第幾列代碼出錯。但是，這對於轉換後的代碼毫無用處。舉例來說，jQuery 1.9壓縮後只有3行，每行3萬個字元，所有內部變數都改了名字。你看著報錯資訊，感到毫無頭緒，根本不知道它所對應的原始位置。

這就是Source map想要解決的問題。

二、什麼是Source map

簡單說，Source map就是一個資訊檔，裡面儲存著位置資訊。也就是說，轉換後的代碼的每一個位置，所對應的轉換前的位置。

有了它，出錯的時候，除錯工具將直接顯示原始代碼，而不是轉換後的代碼。這無疑給開發人員帶來了很大方便。可以500%提高開發效率的前端UI架構！

目前，暫時只有Chrome瀏覽器支援這個功能。在DevelZ喎?http://www.bkjia.com/kf/ware/vc/" target="_blank" class="keylink">vcGVyIFRvb2xztcRTZXR0aW5nyejWw9bQo6zIt8jP0aHW0A=="Enable source maps"。

三、如何啟用Source map

正如前文所提到的，只要在轉換後的代碼尾部，加上一行就可以了。

//@ sourceMappingURL=/path/to/file.js.map

map檔案可以放在網路上，也可以放在本地檔案系統。

四、如何產生Source map

最常用的方法是使用Google的Closure編譯器。

產生命令的格式如下：

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

各個參數的意義如下： 可以500%提高開發效率的前端UI架構！

- js： 轉換前的代碼檔案- create_source_map： 產生的source map檔案- source_map_format：source map的版本，目前一律採用V3。- js_output_file： 轉換後的代碼檔案。

其他的產生方法可以參考這篇文章。

五、Source map的格式

開啟Source map檔案，它大概是這個樣子：

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

整個檔案就是一個JavaScript對象，可以被解譯器讀取。它主要有以下幾個屬性：

- version：Source map的版本，目前為3。  - file：轉換後的檔案名稱。  - sourceRoot：轉換前的檔案所在的目錄。如果與轉換前的檔案在同一目錄，該項為空白。  - sources：轉換前的檔案。該項是一個數組，表示可能存在多個檔案合并。  - names：轉換前的所有變數名和屬性名稱。  - mappings：記錄位置資訊的字串，下文詳細介紹。

六、mappings屬性

下面才是真正有趣的部分：兩個檔案的各個位置是如何一一對應的。

關鍵就是map檔案的mappings屬性。這是一個很長的字串，它分成三層。

　　第一層是行對應，以分號（;）表示，每個分號對應轉換後源碼的一行。所以，第一個分號前的內容，就對應源碼的第一行，以此類推。

　　第二層是位置對應，以逗號（,）表示，每個逗號對應轉換後源碼的一個位置。所以，第一個逗號前的內容，就對應該行源碼的第一個位置，以此類推。

　　第三層是位置轉換，以VLQ編碼錶示，代表該位置對應的轉換前的源碼位置。

舉例來說，假定mappings屬性的內容如下： 可以500%提高開發效率的前端UI架構！

mappings:"AAAAA,BBBBB;CCCCC"

就表示，轉換後的源碼分成兩行，第一行有兩個位置，第二行有一個位置。

七、位置對應的原理

每個位置使用五位，表示五個欄位。

從左邊算起，

- 第一位，表示這個位置在（轉換後的代碼的）的第幾列。  - 第二位，表示這個位置屬於sources屬性中的哪一個檔案。  - 第三位，表示這個位置屬於轉換前代碼的第幾行。  - 第四位，表示這個位置屬於轉換前代碼的第幾列。  - 第五位，表示這個位置屬於names屬性中的哪一個變數。

有幾點需要說明。首先，所有的值都是以0作為基數的。其次，第五位不是必需的，如果該位置沒有對應names屬性中的變數，可以省略第五位。再次，每一位都採用VLQ編碼錶示；由於VLQ編碼是變長的，所以每一位可以由多個字元構成。

如果某個位置是AAAAA，由於A在VLQ編碼中表示0，因此這個位置的五個位實際上都是0。它的意思是，該位置在轉換後代碼的第0列，對應sources屬性中第0個檔案，屬於轉換前代碼的第0行第0列，對應names屬性中的第0個變數。

八、VLQ編碼

最後，談談如何用VLQ編碼錶示數值。

這種編碼最早用於MIDI檔案，後來被多種格式採用。它的特點就是可以非常精簡地表示很大的數值。

VLQ編碼是變長的。如果（整）數值在-15到+15之間（含兩個端點），用一個字元表示；超出這個範圍，就需要用多個字元表示。它規定，每個字元使用6個兩進位位，正好可以借用Base 64編碼的字元表。可以500%提高開發效率的前端UI架構！

在這6個位中，左邊的第一位（最高位）表示是否"連續"（continuation）。如果是1，代表這６個位後面的6個位也屬於同一個數；如果是0，表示該數值到這6個位結束。

　　Continuation
　　|　　　　　Sign
　　|　　　　　|
　　V　　　　　V
　　１０１０１１

這6個位中的右邊最後一位（最低位）的含義，取決於這6個位是否是某個數值的VLQ編碼的第一個字元。如果是的，這個位代表"符號"（sign），0為正，1為負（Source map的符號固定為0）；如果不是，這個位沒有特殊含義，被算作數值的一部分。

九、VLQ編碼：執行個體

下面看一個例子，如何對數值16進行VLQ編碼。

　　第一步，將16改寫成二進位形式10000。

　　第二步，在最右邊補充符號位。因為16大於0，所以符號位為0，整個數變成100000。

　　第三步，從右邊的最低位開始，將整個數每隔5位，進行分段，即變成1和00000兩段。如果最高位所在的段不足5位，則前面補0，因此兩段變成00001和00000。

　　第四步，將兩段的順序倒過來，即00000和00001。

　　第五步，在每一段的最前面添加一個"連續位"，除了最後一段為0，其他都為1，即變成100000和000001。

可以500%提高開發效率的前端UI架構！

　　第六步，將每一段轉成Base 64編碼。

查表可知，100000為g，000001為B。因此，數值16的VLQ編碼為gB。上面的過程，看上去好像很複雜，做起來其實很簡單，具體的實現請看官方的base64-vlq.js檔案，裡面有詳細的注釋。