針對 Source Maps 的一篇介紹（翻譯）

原文連接

組合而且壓縮你的JavaScript 和 CSS文件是提升性能最方便的方式之一。可是當你須要調試這些壓縮後的代碼的時候會發生什麼呢？它多是異常噩夢。不過不用怕，這裏有一個經過source maps的name來解決的問題的方案。

source maps提供了一種將壓縮後的文件代碼映射到源文件的初始位置的方式。這意味着在軟件的幫助下，你能夠輕易的調試你的應用甚至在你已經作了代碼優化（壓縮）處理的狀況下。谷歌以及火狐瀏覽器的開發者工具目前都內置了對source maps的支持。

這篇博客將告訴你source maps的工做原理以及如何生成。咱們將主要關注JS的源映射，CSS的源映射也是相同原理。

---

注意：Firefox的開發人員工具默認啓用對源映射的支持。您可能須要在Chrome中手動啓用支持。要執行此操做，請啓動Chrome開發工具並打開「 設置」窗格（右下角的齒輪）。在常規選項卡中，確保啓用JS源地圖和啓用CSS源的地圖都打勾。

---

源映射的工做原理

顧名思義，源映射由一大堆文件組成，使壓縮後的代碼能夠映射回源文件。你能夠爲每個壓縮後的文件提供不一樣的源映射。

經過在優化（壓縮）後的文件的底部添加特殊註釋，向瀏覽器提供可用的源映射。

//# sourceMappingURL=/path/to/script.js.map
複製代碼

此註釋一般由用於生成源映射的程序添加。若是啓用了對源映射的支持而且開發人員工具已打開，則開發人員工具將僅加載此文件。

您還能夠經過X-SourceMap在壓縮的JavaScript文件的響應中發送HTTP header來指定源映射。

X-SourceMap: /path/to/script.js.map
複製代碼

源映射文件包含一個JSON對象，其中包含有關映射自己和原始JavaScript文件的信息。這是一個簡單的例子：

{
    version: 3,
    file: "script.js.map",
    sources: [
        "app.js",
        "content.js",
        "widget.js"
    ],
    sourceRoot: "/",
    names: ["slideUp", "slideDown", "save"],
    mappings: "AAA0B,kBAAhBA,QAAOC,SACjBD,OAAOC,OAAO..."
}
複製代碼

讓咱們仔細看看每一個屬性。

• version- 此屬性指示文件所遵循的源映射規範的版本。
• file - 源映射文件的名稱。
• sources - 原始源文件的URL數組。
• sourceRoot- （可選）sources將解析數組中全部文件的URL 。
• names - 包含源文件中全部變量和函數名稱的數組。
• mappings- 包含實際代碼映射的Base64 VLQ字符串。（這是魔術發生的地方。）

使用UglifyJS生成源映射

UglifyJS是一個受歡迎的命令行工具，能夠對你的文件進行組合壓縮。版本2 支持大量的命令行標誌用以生成source maps。

• --source-map - 源映射的輸出文件。
• --source-map-root- （可選）這將填充sourceRoot地圖文件中的屬性。
• --source-map-url - （可選）服務器上源映射的路徑。這將被放在優化文件的註釋中。//# sourceMappingURL=/path/to/script.js.map
• --in-source-map - （可選）輸入源映射。若是要壓縮已從其餘位置的源文件生成的JavaScript文件，這可能頗有用。想一想JavaScript庫。
• --prefix或-p- （可選）n從sources屬性中顯示的文件路徑中刪除多個目錄。例如，-p 3將從文件路徑中刪除前三個目錄，所以one/two/three/file.js將成爲file.js。使用-p relative將使UglifyJS爲您找出源地圖和原始文件之間的相對路徑。

以下示例：

uglifyjs [input files] -o script.min.js --source-map script.js.map --source-map-root http://example.com/js -c -m
複製代碼

除此以外還有其餘的工具能夠用來生成source maps。列表以下：

• Closure
• CoffeeScript Compiler
• GruntJS Task for JSMin

谷歌瀏覽器開發者工具中的Source Maps

若是你正確設置了源映射，則應該會看到Sources選項卡的文件窗格中列出的每一個原始JavaScript文件。

檢查頁面的HTML，確認僅引用了壓縮的JavaScript文件。開發工具正在加載源映射文件，而後獲取每一個原始源文件。

火狐瀏覽器開發者工具中的Source Maps

Firefox用戶能夠在開發者工具的「 調試器」選項卡中查看各個源文件。dev工具再次肯定源映射可用，而後獲取每一個引用的源文件。

若是您但願查看壓縮版本，請單擊選項卡右上角的齒輪圖標，而後取消選擇 Show original sources（顯示原始源）。

總結

使用Source Maps容許開發人員維護以及修復代碼時，直接進行調試，同時優化其站點以提升性能。

參考連接

• Source Maps Revision 3 Proposal
• UglifyJS
• Source Maps Demo