在前端开发中，我们经常需要调试 JavaScript 代码。Chrome 浏览器提供了非常好用的 Source Map 工具，可以将编译后的代码映射到源代码上，方便我们进行调试。
但是，在某些情况下，我们可能需要自己生成 Source Map。这时候，npm 包 enb-source-map 就能派上用场了。enb-source-map 可以帮助我们生成 Source Map，并且还支持多种配置方式，使得它非常灵活。
本文就来介绍一下 npm 包 enb-source-map 的使用方法。
安装 enb-source-map
首先，我们需要安装 enb-source-map。我们可以使用 npm 进行安装：
--- ------- -------------- ----------
配置 enb-source-map
接下来，我们需要配置 enb-source-map。在 enb 中，我们可以通过添加 .enb/make.js 文件来配置构建流程。以下是一个简单的 .enb/make.js 文件的例子：
--- ------------ - --------------------------
-------------- - ---------------- -
------------------------ -------------------- -
---------------------------------
---
--这个文件指定了在所有 bundles/* 目录下的构建流程中添加 enb-source-map 技术。
我们还可以在 enb-source-map 中设置一些选项。以下是一个包含所有可选项的 .enb/make.js 文件的例子：
--- ------------ - --------------------------
-------------- - ---------------- -
------------------------ -------------------- -
--------------------------------- -
------------------------------- -----
------------------------------------- ------
------------------------ ----------
----
---
--其中，我们设置了 sourcemapExcludeSourcesContent 为 true，表示在生成 Source Map 时排除源代码内容。这样可以让 Source Map 更加安全；设置 sourcemapIncludeSourcesContentLength 为 false，表示在生成 Source Map 时不包含源代码内容的长度信息，这样可以减小 Source Map 的大小；设置 sourcemapOutputFilename 为 'test.map'，表示将生成的 Source Map 文件命名为 'test.map'。
使用 enb-source-map
配置完成后，我们就可以开始使用 enb-source-map 了。以下是一个简单的示例代码：
--- --- - ---------- -
------------------- ---------
--
------如果我们希望生成这段代码的 Source Map，我们可以执行以下命令：
----------------------- ---- ----------
这个命令会生成一个包含 index.js 和 index.js.map 两个文件的目录。其中，index.js 是编译后的代码，index.js.map 是生成的 Source Map。
在 Chrome 浏览器中打开 HTML 文件后，我们可以通过在 Sources 面板中选择 index.js 并右键点击，然后选择 "Add Source Map" 选项并指定 index.js.map 文件来加载这个 Source Map。之后，在 Debugger 面板中就可以像调试源代码一样调试编译后的代码了。
总结
enb-source-map 是一个非常方便的 npm 包，它可以帮助我们生成 Source Map，并且还支持多种配置方式。通过本文的介绍，相信读者已经能够掌握 enb-source-map 的使用方法了。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/50959