在前端开发过程中，调试非常重要。通常情况下，我们使用开发者工具从浏览器中获取 JavaScript 报错的位置。然而，当代码经过处理并压缩后，行列信息会被移除，因此找到报错位置就变得非常困难。这时，就需要源码映射来帮助我们解决这个问题。
在这篇文章里，我们将介绍一个 npm 包 inline-source-map，它可以为我们提供一个便捷的方式来添加源码映射。具体的使用教程如下：
安装
使用以下命令进行安装：
npm install inline-source-map --save-dev
使用
inline-source-map 的主要功能是将源码映射作为一个字符串嵌入到打包后的 JavaScript 文件中。这意味着，源码映射也会被压缩，但我们仍然可以通过开发者工具来查看报错的位置。
以下是一个使用 inline-source-map 的示例 webpack 配置文件：
-- -------------------- ---- -------
----- ---- - ----------------
----- ------- - -------------------
----- ----------------- - -------------------------------
----- --------------------- - --------------------------------------------
-------------- - -
----- --------------
------ -----------------
------- -
--------- ------------
----- ----------------------- -------
--
-------- -------
-------- -
--- -------------------
--------- ----------------------
--------- -------------
------- ----
---
--- -----------------------
--
------- -
------ -
-
----- --------
-------- ---------------
---- ---------------
-
-
-
-其中，devtool: 'none' 表示我们不需要生成 sourcemap，InlineSourceMapPlugin 则会在打包时将源码映射嵌入到 JavaScript 中。
总结
通过使用 inline-source-map，我们可以在不生成 sourcemap 的情况下，使得开发者工具可以显示源码的错误位置。这为调试带来极大的方便性。希望本文能对正在尝试使用 inline-source-map 的开发者们有所帮助。
完整的示例代码可以在我的 GitHub 仓库中找到：https://github.com/username/inline-source-map-demo。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/40412