在前端开发过程中，调试代码是非常重要的一环。然而，在生产环境中，我们希望将代码进行压缩和混淆，以提高性能和安全性，这使得调试变得困难。为了解决这个问题，我们可以使用 multi-stage-sourcemap 这个 NPM 包来生成多阶段源映射文件，从而实现在压缩和混淆后仍能够方便地调试代码。
什么是多阶段源映射？
多阶段源映射（Multi-Stage SourceMap）是指一个包含多个层级的 SourceMap 文件，每个层级对应于代码的不同处理阶段。例如，我们可以将 ES6 代码转换为 ES5，再将其压缩和混淆，每个阶段都会生成一个单独的 SourceMap 文件，最终生成的 Multi-Stage SourceMap 包含了所有处理阶段的映射信息，从而可以用于在压缩和混淆后调试代码。
如何使用 multi-stage-sourcemap？
首先，在项目中安装 multi-stage-sourcemap：
npm install multi-stage-sourcemap --save-dev
接下来，在项目中添加一个名为 build.js 的脚本，用于生成 Multi-Stage SourceMap 文件：
-- -------------------- ---- -------
----- ---- - ----------------
----- -- - --------------
----- ------------------- - ---------------------------------
----- --------- - ----------------------- ----------------
----- ---------- - ----------------------- ------------------
-- -- ----------- --------- --
----- - ---- --- - - ------------------------------
----------
-----------
------- -
-
----- ---- -- -----
---------- ---- -- --------------------- - -------- --------------------- --------
--
-
----- ---------
------- -----
--
--
---
-- -- ----------- --------- --
------------------------------------- ---------------------
-- ------- ----------- --------- ---
--------------------------------------- ---------
---------------- --------------------------在 build.js 中，我们指定了输入文件和输出文件的路径，并配置了两个处理阶段：将 ES6 代码转换为 ES5 和压缩混淆代码。在每个处理阶段中，我们可以使用任何工具来进行代码转换或压缩混淆，只需要提供一个能够将输入代码转换为输出代码的函数即可。
运行脚本：
node build.js
然后会在 dist/ 目录下生成 bundle.js 和 bundle.js.map 两个文件。bundle.js 包含了经过处理后的代码，而 bundle.js.map 则是 Multi-Stage SourceMap 文件。
如何使用 Multi-Stage SourceMap 进行调试？
在开发过程中，我们可以直接使用源代码进行调试。但在生产环境中，我们需要使用经过压缩和混淆的代码，这时就需要使用 Multi-Stage SourceMap 文件来进行调试了。
在浏览器中打开经过压缩和混淆后的代码，并在 DevTools 中启用 SourceMap 支持。然后将 bundle.js.map 文件上传到服务器，并将其 URL 设置为 //# sourceMappingURL= 后面的值，例如：
//# sourceMappingURL=/path/to/bundle.js.map
此时，在 DevTools 中即可看到经过压缩和混淆后的代码的源代码，并可以进行调试。
结论
使用 Multi-Stage SourceMap 可以方便地在生产环境中进行代码调试。通过使用 multi-stage-sourcemap NPM 包，
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/47688