什麼是JavaScript Souce Map

時間 2019-11-29

標籤什麼 javascript souce map 欄目 JavaScript 简体版

原文原文鏈接

第一部分

　　咱們常常能夠看到後綴名爲.map的文件,好比咱們下載獲得bootstrap的css文件，以下所示：javascript

　　不難理解bootstrap.css、 bootstrap.min.css、等這些常規的代碼，可是map，是什麼鬼？！css

　　通常遇到這問題，咱們均可以先去stackoverflow上搜索，獲得這篇問題。html

　　最高票回答以下：java

Many developers generate CSS style sheets using a CSS preprocessor, such as Sass, Less, or Stylus. Because the CSS files are generated, editing the CSS files directly is not as helpful.webpack

For preprocessors that support CSS source maps, DevTools lets you live-edit your preprocessor source files in the Sources panel, and view the results without having to leave DevTools or refresh the page. When you inspect an element whose styles are provided by a generated CSS file, the Elements panel displays a link to the original source file, not the generated .css file.web

　　即許多的開發者會使用css預處理器如sass、less、stylus等來生成css文件，由於這些css文件時生成的，因此直接編輯他們是沒有用的。對於支持Source Maps的預處者來講，開發者工具可讓你在Sources面板中直接編輯你的源代碼，而且直接查看結果而不用刷新頁面。當你審查一個由生成的css文件顯示的元素的時候，Element面板將會顯示一個對於原文件的連接，而不是.css文件。bootstrap

　　次高票回答回下：數組

　　　　

相信你們對此已經有了必定的瞭解，可是但願知道爲何，還得往下看！sass

第二部分

　　打開bootstrap.min.css，咱們能夠看到以下內容：網絡

　　打開一個js文件，咱們能夠看到下面內容：

　　在上面的文件中咱們能夠看到，二者一樣都有一行被註釋，鍵爲 sourceMappingURL，值就指向了對應的map文件。

爲何須要Source Map？

　　JavaScript和css都變得愈來愈複雜，因此如今從開發過程到生產過程，咱們每每都須要進行文件的轉化，緣由無非如下三種：

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

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

　　（3）其餘語言編譯成JavaScript。最多見的例子就是CoffeeScript。

　　這三種狀況都使得實際運行的代碼可開發中的代碼不同，這給調試工做帶來了許多困難。由於一般JavaScript的解釋器會告訴你，第幾行第幾列代碼出錯。可是，這對於轉換後的代碼毫無用處。舉例來講，jQuery 1.9壓縮後只有3行，每行3萬個字符，全部內部變量都改了名字。你看着報錯信息，感到毫無頭緒，根本不知道它所對應的原始位置。

　　而這就是Source Map須要解決的問題。

什麼是Source Map？

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

如何使用Source Map？

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

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

　　固然Map文件是須要存在的，值得注意的時，Map能夠在網絡也能夠在本地。

如何生成Source Map？

　　實際上，如今都是使用webpack這種打包工具了，因此生成它是很是簡單的，再也不贅述。

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屬性的內容以下：