摘要：常見的源碼轉(zhuǎn)換，主要是以下三種情況壓縮，減小體積。該項(xiàng)是一個(gè)數(shù)組，表示可能存在多個(gè)文件合并。第一層是行對(duì)應(yīng)，以分號(hào)表示，每個(gè)分號(hào)對(duì)應(yīng)轉(zhuǎn)換后源碼的一行。在這個(gè)位中，左邊的第一位最高位表示是否連續(xù)。

這兩天完成了自己的個(gè)人任務(wù)，準(zhǔn)備學(xué)習(xí)一下前輩們的經(jīng)驗(yàn)教訓(xùn)，在項(xiàng)目組的文檔中發(fā)現(xiàn)了一個(gè)要求注意的點(diǎn)，如下：

Js文件的開頭可以加上類似“//@ sourceURL=jquery.extends.js”，方便調(diào)試的時(shí)候找到代碼。

過去在編寫代碼的時(shí)候從未遇到過這個(gè)東西，發(fā)現(xiàn)后查了一下，知道了這個(gè)東西其實(shí)是JavaScript的Source Map（源映射） (sourceURL / sourceMappingURL)。那么他是用來干嘛用的呢?
簡(jiǎn)單的說，源映射是用來為壓縮后的代碼調(diào)試提供方便的。我們知道，為了提高性能，很多網(wǎng)站都會(huì)將js代碼先壓縮再上線，上線之后一旦js出現(xiàn)了問題報(bào)錯(cuò)時(shí)瀏覽器只會(huì)顯示錯(cuò)誤位置在已壓縮文件中的位置，但是壓縮后的js文件也就兩三行的樣子，每一行都有上萬的字符，這個(gè)時(shí)候報(bào)錯(cuò)說第一行有問題，我們?cè)趺茨芸闯鰜碓诘谝恍械哪膫€(gè)位置有問題呢？這樣瀏覽器的錯(cuò)誤提示對(duì)我們調(diào)試而言并沒有什么意義?？v使我們費(fèi)力的找出了報(bào)錯(cuò)所在的位置，這個(gè)時(shí)候我們看到的也是如下樣子的代碼：

getJSON:function(e,t,n){return b.get(e,t,n,"json")}

但是參數(shù)e、t、n是干嘛用的我們也不知道（壓縮會(huì)把變量等縮寫了，從而不能見名知意）。這個(gè)時(shí)候源映射就可以起到作用了。源映射(Source Map)是一種數(shù)據(jù)格式，它存儲(chǔ)了源代碼和生成代碼之間的位置映射關(guān)系源映射一般使用 .map 擴(kuò)展名，源映射本質(zhì)是一個(gè) JSON 文本文檔，其 MIME 類型也一般設(shè)為 application/json。
我們先直擊使用方法再去詳解Source Map。那么如何使用源映射呢？
就像文檔中所說的那樣：在js文件中加上類似于//@ sourceURL=jquery.extends.js的代碼，瀏覽器(最新版 Chrome、Firefox 和 Edge 均支持)就會(huì)加載 jquery.extends.js 并自動(dòng)計(jì)算代碼的實(shí)際位置。在 Chrome 開發(fā)面板(按F12打開)的設(shè)置(按F1打開)中，可以通過勾選 "Enable Source Maps" 選項(xiàng)來設(shè)置是否需要加載源映射。源映射本身并不會(huì)影響代碼的執(zhí)行，只會(huì)在定位錯(cuò)誤位置時(shí)被使用。

接下來，我們從頭開始詳細(xì)說明一下Source Map。

JavaScript腳本正變得越來越復(fù)雜。大部分源碼（尤其是各種函數(shù)庫(kù)和框架）都要經(jīng)過轉(zhuǎn)換，才能投入生產(chǎn)環(huán)境。
常見的源碼轉(zhuǎn)換，主要是以下三種情況：

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

這三種情況，都使得實(shí)際運(yùn)行的代碼不同于開發(fā)代碼，除錯(cuò)（debug）變得困難重重。
通常，JavaScript的解釋器會(huì)告訴你，第幾行第幾列代碼出錯(cuò)。但是，這對(duì)于轉(zhuǎn)換后的代碼毫無用處。舉例來說，jQuery 1.9壓縮后只有3行，每行3萬個(gè)字符，所有內(nèi)部變量都改了名字。你看著報(bào)錯(cuò)信息，感到毫無頭緒，根本不知道它所對(duì)應(yīng)的原始位置。
這就是Source map想要解決的問題。

簡(jiǎn)單說，Source map就是一個(gè)信息文件，里面儲(chǔ)存著位置信息。也就是說，轉(zhuǎn)換后的代碼的每一個(gè)位置，所對(duì)應(yīng)的轉(zhuǎn)換前的位置。
有了它，出錯(cuò)的時(shí)候，除錯(cuò)工具將直接顯示原始代碼，而不是轉(zhuǎn)換后的代碼。這無疑給開發(fā)者帶來了很大方便。

正如前文所提到的，只要在轉(zhuǎn)換后的代碼開頭，加上一行就可以了?！　?br> //@ sourceURL=jquery.extends.js

現(xiàn)在很多生成工具都支持生成源映射，如 Uglify, Grunt, Gulp，可以參考生成工具的文檔。最常用的方法是使用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

各個(gè)參數(shù)的意義如下：
　

-- js： 轉(zhuǎn)換前的代碼文件
-- create_source_map： 生成的source map文件
-- source_map_format：source map的版本，目前一律采用V3。
-- js_output_file： 轉(zhuǎn)換后的代碼文件。

其他生成方法：https://code.tutsplus.com/tut...

打開Source map文件，它大概是這個(gè)樣子：

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

整個(gè)文件就是一個(gè)JavaScript對(duì)象，可以被解釋器讀取。它主要有以下幾個(gè)屬性：

-version：Source map的版本。
-file：轉(zhuǎn)換后的文件名。
-sourceRoot：轉(zhuǎn)換前的文件所在的目錄。如果與轉(zhuǎn)換前的文件在同一目錄，該項(xiàng)為空。
-sources：轉(zhuǎn)換前的文件。該項(xiàng)是一個(gè)數(shù)組，表示可能存在多個(gè)文件合并。
-names：轉(zhuǎn)換前的所有變量名和屬性名。
-mappings：記錄位置信息的字符串，下文詳細(xì)介紹。

下面才是真正有趣的部分：兩個(gè)文件的各個(gè)位置是如何一一對(duì)應(yīng)的。
關(guān)鍵就是map文件的mappings屬性。這是一個(gè)很長(zhǎng)的字符串，它分成三層。
　

第一層是行對(duì)應(yīng)，以分號(hào)（;）表示，每個(gè)分號(hào)對(duì)應(yīng)轉(zhuǎn)換后源碼的一行。所以，第一個(gè)分號(hào)前的內(nèi)容，就對(duì)應(yīng)源碼的第一行，以此類推。
第二層是位置對(duì)應(yīng)，以逗號(hào)（,）表示，每個(gè)逗號(hào)對(duì)應(yīng)轉(zhuǎn)換后源碼的一個(gè)位置。所以，第一個(gè)逗號(hào)前的內(nèi)容，就對(duì)應(yīng)該行源碼的第一個(gè)位置，以此類推。
第三層是位置轉(zhuǎn)換，以VLQ編碼表示，代表該位置對(duì)應(yīng)的轉(zhuǎn)換前的源碼位置。

舉例來說，假定mappings屬性的內(nèi)容如下：
　mappings:"AAAAA,BBBBB;CCCCC"
就表示，轉(zhuǎn)換后的源碼分成兩行，第一行有兩個(gè)位置，第二行有一個(gè)位置。

每個(gè)位置使用五位，表示五個(gè)字段。
從左邊算起，

　　- 第一位，表示這個(gè)位置在（轉(zhuǎn)換后的代碼的）的第幾列。
　　- 第二位，表示這個(gè)位置屬于sources屬性中的哪一個(gè)文件。
　　- 第三位，表示這個(gè)位置屬于轉(zhuǎn)換前代碼的第幾行。
　　- 第四位，表示這個(gè)位置屬于轉(zhuǎn)換前代碼的第幾列。
　　- 第五位，表示這個(gè)位置屬于names屬性中的哪一個(gè)變量。

有幾點(diǎn)需要說明。首先，所有的值都是以0作為基數(shù)的。其次，第五位不是必需的，如果該位置沒有對(duì)應(yīng)names屬性中的變量，可以省略第五位。再次，每一位都采用VLQ編碼表示；由于VLQ編碼是變長(zhǎng)的，所以每一位可以由多個(gè)字符構(gòu)成。
如果某個(gè)位置是AAAAA，由于A在VLQ編碼中表示0，因此這個(gè)位置的五個(gè)位實(shí)際上都是0。它的意思是，該位置在轉(zhuǎn)換后代碼的第0列，對(duì)應(yīng)sources屬性中第0個(gè)文件，屬于轉(zhuǎn)換前代碼的第0行第0列，對(duì)應(yīng)names屬性中的第0個(gè)變量。

最后，談?wù)勅绾斡肰LQ編碼表示數(shù)值。
這種編碼最早用于MIDI文件，后來被多種格式采用。它的特點(diǎn)就是可以非常精簡(jiǎn)地表示很大的數(shù)值。
VLQ編碼是變長(zhǎng)的。如果（整）數(shù)值在-15到+15之間（含兩個(gè)端點(diǎn)），用一個(gè)字符表示；超出這個(gè)范圍，就需要用多個(gè)字符表示。它規(guī)定，每個(gè)字符使用6個(gè)兩進(jìn)制位，正好可以借用Base 64編碼的字符表。

在這6個(gè)位中，左邊的第一位（最高位）表示是否"連續(xù)"（continuation）。如果是1，代表這６個(gè)位后面的6個(gè)位也屬于同一個(gè)數(shù)；如果是0，表示該數(shù)值到這6個(gè)位結(jié)束。

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

這6個(gè)位中的右邊最后一位（最低位）的含義，取決于這6個(gè)位是否是某個(gè)數(shù)值的VLQ編碼的第一個(gè)字符。如果是的，這個(gè)位代表"符號(hào)"（sign），0為正，1為負(fù)（Source map的符號(hào)固定為0）；如果不是，這個(gè)位沒有特殊含義，被算作數(shù)值的一部分。

下面看一個(gè)例子，如何對(duì)數(shù)值16進(jìn)行VLQ編碼。
　　

第一步，將16改寫成二進(jìn)制形式10000。 　　
第二步，在最右邊補(bǔ)充符號(hào)位。因?yàn)?6大于0，所以符號(hào)位為0，整個(gè)數(shù)變成100000。
第三步，從右邊的最低位開始，將整個(gè)數(shù)每隔5位，進(jìn)行分段，即變成1和00000兩段。如果最高位所在的段不足5位，則前面補(bǔ)0，因此兩段變成00001和00000。
第四步，將兩段的順序倒過來，即00000和00001。
第五步，在每一段的最前面添加一個(gè)"連續(xù)位"，除了最后一段為0，其他都為1，即變成100000和000001。
第六步，將每一段轉(zhuǎn)成Base 64編碼。

查表可知，100000為g，000001為B。因此，數(shù)值16的VLQ編碼為gB。上面的過程，看上去好像很復(fù)雜，做起來其實(shí)很簡(jiǎn)單，具體的實(shí)現(xiàn)請(qǐng)看官方的base64-vlq.js文件，里面有詳細(xì)的注釋。

參考原文：http://www.ruanyifeng.com/blo...