本頁面由 Cloud Translation API 翻譯而成。

什麼是來源對應？

Jecelyn Yeen

來源對應是新型網頁開發中的重要工具，可進行偵錯變得簡單許多本頁面說明來源對應的基本概念，以及這些對應關係以及這些模型如何改善偵錯體驗

來源對應的需求

早期的網路應用程式在開發時複雜度都較低，開發人員部署了 HTML、CSS 和 JavaScript 檔案都存放在網路上

新世代複雜的網頁應用程式必須在開發工作流程例如：

提供範本語言和 HTML 預先處理器的範本：Pug、 Nunjucks、扣分項目：
CSS 預先處理器：SCSS LESS、PostCSS。
JavaScript 架構：Angular、React、 Vue、Svelte。
JavaScript 中繼架構：Next.js、 Nuxt、Astro。
高階程式設計語言： TypeScript、 Dart、 CoffeeScript：

，瞭解如何調查及移除這項存取權。

這些工具需要建構程序才能將程式碼轉譯成標準 HTML 和瀏覽器都能解讀的 JavaScript 和 CSS另一項常見的做法是使用像 Terser。

舉例來說，透過建構工具，我們可以轉譯並壓縮下列項目將 TypeScript 檔案轉換為單行 JavaScript。您可以在這個 GitHub 上的示範。

/* 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 和建構。

根據預設，部分工具包含來源對應。其他人可能需要額外的來產生容器：

/* 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"
}