此页面由 Cloud Translation API 翻译。

什么是源代码映射？

Jecelyn Yeen

源代码映射是现代 Web 开发中的一种重要工具，大大简化本页介绍了源代码映射的基础知识，以及它们是如何以及它们如何改善调试体验。

对源映射的需求

早期的 Web 应用是以较低的复杂性构建的。开发者部署了 HTML、CSS 和 JavaScript 文件直接上传到网络。

更现代和更复杂的 Web 应用可能需要各种工具开发工作流。例如：

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

。 <ph type="x-smartling-placeholder">

这些工具需要通过构建流程将您的代码转译为标准 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://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"
}