[譯] 源代碼映射（Source Map）簡介

• 原文地址：An Introduction to Source Maps
• 原文做者：Matt West
• 譯文出自：掘金翻譯計劃
• 本文永久連接：github.com/xitu/gold-m…
• 譯者：EmilyQiRabbit
• 校對者：calpa, Raoul1996

合併與壓縮 JavaScript 和 CSS 的代碼，是能爲你的網站提高性能的最簡單的舉措之一。可是若是想要調試這些壓縮過的文件，又會怎麼樣呢？那簡直是噩夢了。可是別怕，眼前就有一個解決辦法，它就是源代碼映射。

源代碼映射提供了一個映射，將壓縮後的文件和原始文件聯繫起來。這就意味着 —— 藉助一點軟件的幫助 —— 就算是資源被壓縮過，你也能很輕鬆的調試應用。Chrome 和 Firefox 開發者工具都內建支持源代碼映射。

在這篇博客文章中，你將會學習到源代碼映射是如何工做的，而且瞭解它們是怎麼生成的。咱們將主要關注 JavaScript 代碼的源代碼映射，但這些原則也適用於 CSS 源代碼映射。

---

注：在 Firefox 的開發者工具裏，源代碼映射是默認開啓的。而 Chrome 則須要手動的開啓支持（自 Chrome 39 開始 Source Maps 也已經默認處於啓用狀態，譯者注）。開啓的方法是，啓動 Chrome 的開發工具而後打開 Settings 面板（右下角的小齒輪）。在 General 標籤中確保 Enable JS source maps 和 Enable CSS source maps 都被勾選了。

---

源代碼映射是如何工做的

顧名思義，源代碼映射包含了將壓縮後文件代碼映射回源代碼的全部信息。你能夠爲每一個壓縮文件指定不一樣的源映射。

經過向被優化文件的底部添加一個特殊註釋，你可向瀏覽器指示源代碼映射可用。

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

此註釋一般由生成源代碼映射的程序添加。只有在啓用了對源代碼映射的支持並打開開發工具時，開發者工具纔會加載此文件。

經過響應對壓縮的 JavaScript 文件請求的時帶 X-SourceMap HTTP 首部的方式，你一樣能夠聲明源代碼映射可用。

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 VLQs 的字符串，包含了實際的代碼映射。（這就是魔法發生的地方）

使用 UglifyJS 生成源文件映射

UglifyJS 是一個很流行的命令行工具，它能夠幫助你合併和壓縮 JavaScript 文件。版本 2 提供了不少命令行參數，幫助生成源文件映射。

• --source-map – 源文件映射的輸出文件。
• --source-map-root – （可選參數）它將填充映射文件中的 Sourceroot 屬性。
• --source-map-url – （可選參數）服務器中源文件映射的路徑。它將會被放置在被優化文件中的註釋使用。//# sourceMappingURL=/path/to/script.js.map
• --in-source-map – （可選參數）輸入源代碼映射。當你正在壓縮那些已經在別處生成過源代碼映射的 JavaScript 文件的時候，這個參數就頗有用了。好比 JavaScript 庫。
• --prefix 或 -p – （可選參數）從 sources 屬性的文件路徑中，移除 n 個目錄。例如，-p 3 將會從文件路徑中移除前三個目錄，那麼 one/two/three/file.js 就會成爲 file.js。使用 -p relative 將會讓 UgulifyJS 爲您計算源文件映射和原始文件之間的相對路徑。

這是一個命令的例子，它使用了一些上述的命令行參數。

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

---

注意：若是你爲 Grunt 使用了 grunt-contrib-uglify 插件，請參考關於如何在 Gruntfile 文件中配置這些選項的文檔信息。

---

還有不少其餘可用的工具支持生成源文件映射，一些可選項在下文列出：

• Closure
• CoffeeScript Compiler
• GruntJS Task for JSMin

Chrome 開發工具中的源文件映射

Chrome 開發工具中的 Sources 標籤

若是你已經正確的設置好了源文件映射，那麼你將會看到全部的原始 JavaScript 文件在 Sources 標籤的面板中被列出。

檢查頁面的 HTML，你將可以確認它其實只引用了壓縮的 JavaScript 文件。開發工具將爲您加載源文件映射文件，而後獲取每一個原始文件。

試試這個例子

Firefox 開發者工具中的源文件映射

Firefox 開發者工具中的 Debugger 標籤

Firefox 用戶能夠在開發者工具的 Debugger 標籤看到獨立的源文件。一樣，開發工具已經肯定源映射是可用的以後，才獲取每一個引用的源文件。

若是但願查看壓縮版本，請單擊選項卡右上角的齒輪圖標，並取消選擇 Show original sources。

試試這個例子

最後總結

使用源代碼映射可讓開發人員維護一個能夠直接調試的環境，同時也能夠優化網站的性能。

在這篇文章中，您學習了源代碼映射是如何工做的，並瞭解瞭如何使用 UgulifyJS 生成它們。若是你曾經用壓縮過的文件（你應該這麼作）發佈網站，那麼花點時間把源文件映射建立集成到你的工做流程中是很是值得的。

一些有價值的連接

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

若是發現譯文存在錯誤或其餘須要改進的地方，歡迎到 掘金翻譯計劃 對譯文進行修改並 PR，也可得到相應獎勵積分。文章開頭的 本文永久連接 即爲本文在 GitHub 上的 MarkDown 連接。

---

掘金翻譯計劃 是一個翻譯優質互聯網技術文章的社區，文章來源爲 掘金 上的英文分享文章。內容覆蓋 Android、iOS、前端、後端、區塊鏈、產品、設計、人工智能等領域，想要查看更多優質譯文請持續關注 掘金翻譯計劃、官方微博、知乎專欄。