JavaScript的Source Map (sourceURL / sourceMappingUR

renweihub 發布于2019-08-21 16:02 / 2065人閱讀

摘要：常見的源碼轉換，主要是以下三種情況壓縮，減小體積。該項是一個數組，表示可能存在多個文件合并。第一層是行對應，以分號表示，每個分號對應轉換后源碼的一行。在這個位中，左邊的第一位最高位表示是否連續。

這兩天完成了自己的個人任務，準備學習一下前輩們的經驗教訓，在項目組的文檔中發現了一個要求注意的點，如下：

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

過去在編寫代碼的時候從未遇到過這個東西，發現后查了一下，知道了這個東西其實是JavaScript的Source Map（源映射） (sourceURL / sourceMappingURL)。那么他是用來干嘛用的呢?
簡單的說，源映射是用來為壓縮后的代碼調試提供方便的。我們知道，為了提高性能，很多網站都會將js代碼先壓縮再上線，上線之后一旦js出現了問題報錯時瀏覽器只會顯示錯誤位置在已壓縮文件中的位置，但是壓縮后的js文件也就兩三行的樣子，每一行都有上萬的字符，這個時候報錯說第一行有問題，我們怎么能看出來在第一行的哪個位置有問題呢？這樣瀏覽器的錯誤提示對我們調試而言并沒有什么意義。縱使我們費力的找出了報錯所在的位置，這個時候我們看到的也是如下樣子的代碼：

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

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

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

一、從源碼轉換講起

JavaScript腳本正變得越來越復雜。大部分源碼（尤其是各種函數庫和框架）都要經過轉換，才能投入生產環境。
常見的源碼轉換，主要是以下三種情況：

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

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

二、什么是Source map

簡單說，Source map就是一個信息文件，里面儲存著位置信息。也就是說，轉換后的代碼的每一個位置，所對應的轉換前的位置。
有了它，出錯的時候，除錯工具將直接顯示原始代碼，而不是轉換后的代碼。這無疑給開發者帶來了很大方便。

三、如何啟用Source map

正如前文所提到的，只要在轉換后的代碼開頭，加上一行就可以了。　　
//@ sourceURL=jquery.extends.js

四、如何生成Source map

現在很多生成工具都支持生成源映射，如 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

各個參數的意義如下：
　

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

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

五、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的版本。
-file：轉換后的文件名。
-sourceRoot：轉換前的文件所在的目錄。如果與轉換前的文件在同一目錄，該項為空。
-sources：轉換前的文件。該項是一個數組，表示可能存在多個文件合并。
-names：轉換前的所有變量名和屬性名。
-mappings：記錄位置信息的字符串，下文詳細介紹。

六、mappings屬性

下面才是真正有趣的部分：兩個文件的各個位置是如何一一對應的。
關鍵就是map文件的mappings屬性。這是一個很長的字符串，它分成三層。
　

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

舉例來說，假定mappings屬性的內容如下：
　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編碼的字符表。

在這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。
第六步，將每一段轉成Base 64編碼。

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

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

云服務器 GPU云服務器 source-map javascript實現map sourceURL map集合的使用

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/88334.html

webpack@4.32.2研究筆記【03】- devtool

摘要：簡介選項用于控制是否需要生成，以及如何生成。表示把每一個模塊文件都轉換為字符串，并且在每一個模塊代碼的尾部添加文件名，并使用執行。通過來處理已有的。優點是不需要建立和部署內網的服務器，缺點是無法直接線上源碼。簡介 ? devtool選項用于控制是否需要生成source map，以及如何生成source map。源碼地址什么是source map？ ? source ma...

wangtdgoodluck 2019-08-23 18:01 評論0 收藏0
source-map整理

摘要：這個就是把的換成了完整信息的形式特點結合了和的特點，將每個模塊包起來，并且最后添加的信息，可以知道行列，可以為模塊緩存它可以更快的重建。最終的只有一份，它是對生成的進行簡化，然后再次生成的。 eval 每個 module 會通過 eval() 來執行，并在后面添加?//# sourceURL 形式： webpackJsonp([1],[ function(module,export...

CoreDump 2019-08-20 16:31 評論0 收藏0
vue + webpack +chrome 調試

摘要：最近整理一下針對的調試方法。一是的調試的插件，可以直接顯示組件現在的狀態。最終的只有一份，它是對生成的進行簡化，然后再次生成的。關于的標記是不起作用的需要手動加入命令問題描述 vue 經過webpack的打包壓縮之后，通過source看到的代碼已經面目全非，無法輕易對代碼進行調試。最近整理一下針對vue的調試方法。一、 devtools devtools是Chrome的調試vue的...

BWrong 2019-08-23 12:49 評論0 收藏0
window onerror 各瀏覽器下表現總結

摘要：各瀏覽器下表現總結做前端錯誤上報，必然離不開，但在不同設備上表現并不一致，瀏覽器為避免信息泄露，在一些情況下并不會給出詳細的錯誤信息，本文的目的就是通過跑一些簡單的小例子，驗證在不同瀏覽器下的具體表現。 window onerror 各瀏覽器下表現總結做前端錯誤上報，必然離不開window onerror，但window onerror在不同設備上表現并不一致，瀏覽器為避免信息泄露，...

rickchen 2019-08-01 17:34 評論0 收藏0
window onerror 各瀏覽器下表現總結

摘要：各瀏覽器下表現總結做前端錯誤上報，必然離不開，但在不同設備上表現并不一致，瀏覽器為避免信息泄露，在一些情況下并不會給出詳細的錯誤信息，本文的目的就是通過跑一些簡單的小例子，驗證在不同瀏覽器下的具體表現。 window onerror 各瀏覽器下表現總結做前端錯誤上報，必然離不開window onerror，但window onerror在不同設備上表現并不一致，瀏覽器為避免信息泄露，...

xiongzenghui 2019-08-21 16:19 評論0 收藏0