【javascript】source map

    最近在學webpack，遇到一個從未見過的名詞source map。便跑去百度了一番，對其有了一些瞭解。好記性不如爛筆頭，在此記錄一下，方便之後查詢。

一：source map長啥樣？

以前下載Jquery的時候發現有一個文件，叫作Jquery.min.map文件。這就是一個source map 文件。打開後他是這樣的：

二：source map有啥做用？

source map是一個獨立的文件，與源碼在同一個目錄下。它有一個頗有用的功能，下面就來聊聊這個功能。

一、從源碼轉換提及

JavaScript腳本正變得愈來愈複雜。大部分源碼（尤爲是各類函數庫和框架）都要通過轉換，才能投入生產環境。

常見的源碼轉換，主要是如下二種狀況：

（1）壓縮，減少體積。好比jQuery 1.9的源碼，壓縮前是252KB，壓縮後是32KB。

（2）多個文件合併，減小HTTP請求數。

拿Jquery.js舉例，它壓縮後是長這個樣子的：

系統正常運行的時候到不以爲有啥問題，但在出錯須要debug的時候就會發現困難重重。

當js解析器告訴你錯誤在第幾行第幾列的時候，這些信息對你沒有任何用處。仍是拿Jquery舉例。

jQuery 1.9壓縮後只有3行，每行3萬個字符，全部內部變量都改了名字。你看着報錯信息，感到毫無頭緒，根本不知道它所對應的原始位置。固然若是你是超級大牛，非要對着壓縮後的js文件進行查錯，我只想問一句：給抱大腿不？以上說的種種，就是source map 想要解決的問題。

二、source map 如何解決咱們的問題

簡單說，Source map就是一個信息文件，裏面儲存着位置信息。也就是說，轉換後的代碼的每個位置，所對應的轉換前的位置。

有了它，出錯的時候，除錯工具將直接顯示原始代碼，而不是轉換後的代碼。這無疑給開發者帶來了很大方便。

3、瀏覽器設置 source map功能

在Developer Tools的Setting設置中，確認選中"Enable source maps"。

4、如何啓用 source map

只須要在壓縮後的js文件末尾添加該行代碼便可。

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

如：在 jquery.min.js  文件中添加此行 //@ sourceMappingURL=jquery.min.map

5、如何生成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

各個參數的意義以下：

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

6、結束

記到這裏，差很少該結束了。至於source map 是如何讓壓縮後的文件與源碼進行一一對應的，我的認爲就不必深究下去了。固然感興趣的同窗能夠經過百度進一步瞭解一番。