[譯] 原始碼對映（Source Map）簡介

Yuqi發表於2018-10-29
原始碼

[譯] 原始碼對映（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 生成原始檔對映

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 開發工具中的原始檔對映

The Sources Tab in Chrome Dev Tools

Chrome 開發工具中的 Sources 標籤

如果你已經正確的設定好了原始檔對映，那麼你將會看到所有的原始 JavaScript 檔案在 Sources 標籤的皮膚中被列出。

檢查頁面的 HTML，你將能夠確認它其實只引用了壓縮的 JavaScript 檔案。開發工具將為您載入原始檔對映檔案，然後獲取每個原始檔案。

試試這個例子

Firefox 開發者工具中的原始檔對映

The Debugger Tab in the Firefox Developer Tools

Firefox 開發者工具中的 Debugger 標籤

Firefox 使用者可以在開發者工具的 Debugger 標籤看到獨立的原始檔。同樣，開發工具已經確定源對映是可用的之後，才獲取每個引用的原始檔。

如果希望檢視壓縮版本，請單擊選項卡右上角的齒輪圖示，並取消選擇 Show original sources。

試試這個例子

最後總結

使用原始碼對映可以讓開發人員維護一個可以直接除錯的環境，同時也可以優化網站的效能。

在這篇文章中，您學習了原始碼對映是如何工作的，並瞭解瞭如何使用 UgulifyJS 生成它們。如果你曾經用壓縮過的檔案（你應該這麼做）釋出網站，那麼花點時間把原始檔對映建立整合到你的工作流程中是非常值得的。

一些有價值的連結

如果發現譯文存在錯誤或其他需要改進的地方，歡迎到 掘金翻譯計劃 對譯文進行修改並 PR，也可獲得相應獎勵積分。文章開頭的 本文永久連結 即為本文在 GitHub 上的 MarkDown 連結。

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

相關文章