[譯] 原始碼對映（Source Map）簡介
合併與壓縮 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 生成原始檔對映
ofollow,noindex">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 檔案中配置這些選項的 文件資訊 。
還有很多其他可用的工具支援生成原始檔對映，一些可選項在下文列出：
Chrome 開發工具中的原始檔對映
Chrome 開發工具中的 Sources 標籤
如果你已經正確的設定好了原始檔對映，那麼你將會看到所有的原始 JavaScript 檔案在 Sources 標籤的面板中被列出。
檢查頁面的 HTML，你將能夠確認它其實只引用了壓縮的 JavaScript 檔案。開發工具將為您載入原始檔對映檔案，然後獲取每個原始檔案。
Firefox 開發者工具中的原始檔對映
Firefox 開發者工具中的 Debugger 標籤
Firefox 使用者可以在開發者工具的 Debugger 標籤看到獨立的原始檔。同樣，開發工具已經確定源對映是可用的之後，才獲取每個引用的原始檔。
如果希望檢視壓縮版本，請單擊選項卡右上角的齒輪圖示，並取消選擇 Show original sources 。
最後總結
使用原始碼對映可以讓開發人員維護一個可以直接除錯的環境，同時也可以優化網站的效能。
在這篇文章中，您學習了原始碼對映是如何工作的，並瞭解瞭如何使用 UgulifyJS 生成它們。如果你曾經用壓縮過的檔案（你應該這麼做）釋出網站，那麼花點時間把原始檔對映建立整合到你的工作流程中是非常值得的。