什么是源代码映射？

原创前端小智大迁世界

先看下本篇主要内容：

文篇主要介绍源代码映射，源代码映射（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"
}