什么是源地图？
通过合集保持井井有条根据您的偏好保存内容并进行分类。

Jecelyn Yeen

源地图是现代 Web 开发中的一个关键工具，它使调试变得更加容易。本页面探讨了源地图的基础知识、其生成方式以及它们如何改善调试体验。

源地图的需求

早期的 Web 应用程序构建复杂度较低。开发人员直接将 HTML、CSS 和 JavaScript 文件部署到 Web。

更现代和复杂的 Web 应用程序可能需要在其开发工作流程中使用各种工具。例如

模板语言和 HTML 预处理器：Pug、Nunjucks、Markdown。
CSS 预处理器：SCSS、LESS、PostCSS。
JavaScript 框架：Angular、React、Vue、Svelte。
JavaScript 元框架：Next.js、Nuxt、Astro。
高级编程语言：TypeScript、Dart、CoffeeScript。

A brief overview of various tooling. — 一些常见的 Web 应用程序开发工具。

这些工具需要一个构建过程，将您的代码转译为浏览器可以理解的标准 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 和 esbuild。

某些工具默认包含源地图。其他工具可能需要额外的配置才能生成它们

/* Example configuration: vite.config.js */
/* https://vite.vuejs.ac.cn/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"
}