什麼是原始碼對映？

微信搜尋【大遷世界】, 我會第一時間和你分享前端行業趨勢，學習途徑等等。
本文 GitHub https://github.com/qq449245884/xiaozhi 已收錄，有一線大廠面試完整考點、資料以及我的系列文章。

先看下本篇主要內容：

文篇主要介紹原始碼對映，原始碼對映（Source maps）是以.map結尾的檔案，例如example.min.js.map和styles.css.map。大多數構建工具都可以生成原始碼對映檔案，例如Vite、webpack、Rollup、Parcel、esbuild等，一些工具預設包含原始碼對映，而其他工具則需要額外的配置才能生成它們。

使用原始碼對映可以方便地在開發過程中進行除錯，因為它們提供了一種將壓縮、混淆和最佳化的程式碼還原為原始原始碼的方法。這對於診斷和修復錯誤非常有幫助，特別是在生產環境中。原始碼對映還可以幫助你確定哪些程式碼行負責執行特定的功能，以及從哪裡呼叫了特定的函式。

儘管原始碼對映非常有用，但是它們會增加檔案大小並增加伺服器的負載。因此，在生產環境中通常會禁用它們，而在開發過程中啟用它們以便進行除錯。如果你使用的構建工具不支援原始碼對映，則有可能需要手動編寫它們。

下面是正文~~~~

今天，我們要談論原始碼對映，這是現代 Web 開發中非常重要的工具，可以顯著地簡化除錯過程。在本文中，我們將探討原始碼對映的基礎知識，它們是如何生成的，以及它們如何提高除錯體驗。

需要原始碼對映

回到過去的美好時光，我們使用純HTML、CSS和JavaScript構建Web應用程式，並將相同的檔案部署到Web上。

然而，隨著我們現在構建更復雜的Web應用程式，開發工作流可能涉及使用各種工具。例如：

模板語言和HTML前處理器：Pug，Nunjucks，Markdown
CSS 前處理器：SCSS、LESS、PostCSS
JavaScript 框架：Angular、React、Vue、Svelte
JavaScript元框架：Next.js，Nuxt，Astro
高階程式語言：TypeScript、Dart、CoffeeScript

這些工具需要構建過程將我們的程式碼轉換為標準的 HTML、JavaScript 和 CSS，以便瀏覽器能夠理解。此外，為了最佳化效能，通常會壓縮（例如使用 Terser 來縮小和混淆 JavaScript）和合並這些檔案，減小它們的大小並使它們更適合於Web。

例如，使用構建工具，我們可以將以下TypeScript檔案轉換並壓縮為一行JavaScript程式碼。

/* A TypeScript demo: example.ts */

document.querySelector('button')?.addEventListener('click', () => {
  const num: number = Math.floor(Math.random() * 101);
  const greet: string = 'Hello';
  (document.querySelector('p') as HTMLParagraphElement).innerText = `${greet}, you are no. ${num}!`;
  console.log(num);
});

一個壓縮版本將是：

/* A compressed JavaScript version of the TypeScript demo: example.min.js  */

document.querySelector("button")?.addEventListener("click",(()=>{const e=Math.floor(101*Math.random());document.querySelector("p").innerText=`Hello, you are no. ${e}!`,console.log(e)}));

然而，這種最佳化可能會使除錯變得更具挑戰性。將所有內容壓縮到單行中並縮短變數名稱的壓縮程式碼可能會使問題的源頭難以確定。這就是源對映的作用——它們將編譯後的程式碼對映回原始程式碼。

生成原始碼對映

源對映是以 .map 結尾的檔案（例如， example.min.js.map 和 styles.css.map ）。它們可以由大多數構建工具生成，例如 Vite、webpack、Rollup、Parcel、esbuild 等等。

一些工具預設包含原始碼對映，而其他一些工具可能需要額外的配置才能生成它們。

/* Example configuration: vite.config.js */
/* https://vitejs.dev/config/ */

export default defineConfig({
  build: {
    sourcemap: true, // enable production source maps
  },
  css: {
    devSourcemap: true // enable CSS source maps during development
  }
})

理解原始碼對映

這些源對映檔案包含有關編譯程式碼如何對映到原始程式碼的基本資訊，使開發人員能夠輕鬆除錯。這是一個源對映的示例。

{
  "mappings": "AAAAA,SAASC,cAAc,WAAWC, ...",
  "sources": ["src/script.ts"],
  "sourcesContent": ["document.querySelector('button')..."],
  "names": ["document","querySelector", ...],
  "version": 3,
  "file": "example.min.js.map"
}

源對映的最關鍵方面是 mappings 欄位。它使用 VLQ 基於 64 編碼的字串將編譯檔案中的行和位置對映到相應的原始檔案。可以使用源對映視覺化工具（如 source-map-visualization 和 Source Map Visualization）來視覺化此對映。