在前端应用中，我们经常会使用 JavaScript、CSS 和 HTML 文件，这些文件都可以被压缩或者混淆，以提高网站性能。然而，当我们在代码中出现错误时，需要知道是哪个文件出现了问题。这个时候，就需要使用 sourcemap 文件了。sourcemap 文件保存了压缩后的代码与源代码之间的映射关系，可以让我们在浏览器中调试时显示出源代码，方便我们定位问题。本文介绍了一个 npm 包 sourcemap-filename，它可以帮助我们快速地解析 sourcemap 文件，获取到源文件名和行号。
安装
使用 npm 安装 sourcemap-filename：
npm install sourcemap-filename --save
使用
下面是一个使用例子。我们先来看一下被压缩后的代码，它的文件名是 main.js：
!function(){var o=10;console.log(o)}();
//# sourceMappingURL=main.js.map可以看到，这个 JavaScript 文件被压缩了，我们无法直接定位错误。但是在代码末尾有一行注释，它指向了 sourcemap 文件。
我们来看一下 sourcemap 文件的内容，它的文件名是 main.js.map：
{
"version": 3,
"file": "main.js",
"sources": ["src/main.js"],
"sourcesContent": ["var x = 10;\nconsole.log(x);"],
"mappings": "AAAA,QAAA,IAAI,MAAM,GAAK,CAArkB,OAAOhC",
}可以看到，sourcemap 文件保存了压缩后的代码与源代码之间的映射关系。其中，version 字段表示 sourcemap 版本号，file 字段表示生成的压缩文件名，sources 表示所有源文件，sourcesContent 表示所有源文件的内容，mappings 是关键字段，它表示映射关系。我们可以在网上找到更详细的 sourcemap 文件格式说明。
接下来就是使用 sourcemap-filename 包来获取源文件名和行号了。我们在 JavaScript 代码中插入下面的代码：
-- -------------------- ---- -------
----- -- - --------------
----- - ----------------- - - ----------------------
----- - ----- - - ------------------------------
----- ---- - -------------------------- - --------- ------ ---
----- ----- - ----------------- -------------------------
----- ------------ - ---------
----- --------------- - ------------------------------------- ---- - --------- ------ ---
----- -------- - ----- --------------------------------------------
----- - ------- ---- - - ------------------------------------
----- --
------- --
----
------------------- ----- ---------- ----- ----------代码分为几个步骤：
- 读取压缩后的 JavaScript 代码。
- 从代码中找到 sourcemap URL。
- 读取 sourcemap 文件。
- 使用 source-map 包创建一个 SourceMapConsumer 对象，这个对象可以解析 sourcemap 文件。
- 通过 sourcemap 映射关系，找到原始位置的源代码所在行号和列号。
- 使用 sourcemap-filename 包获取源文件名和行号。
输出结果应该是：
Source file: src/main.js, line: 1
这就是源代码所在的位置了。
指导意义
sourcemap-filename 帮助我们解析 sourcemap 文件，获取源文件名和行号，方便我们在浏览器中调试问题。这个包对开发人员来说非常实用，可以大大提高排查问题的效率。在实际项目中，我们可以将它集成到构建工具中，自动查找源文件。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/5eedba19b5cbfe1ea06118d3