在前端开发中,我们经常需要调试 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 进行安装:
npm install enb-source-map --save-dev
配置 enb-source-map
接下来,我们需要配置 enb-source-map。在 enb 中,我们可以通过添加 .enb/make.js
文件来配置构建流程。以下是一个简单的 .enb/make.js
文件的例子:
var enbSourceMap = require('enb-source-map'); module.exports = function(config) { config.node('bundles/*', function(nodeConfig) { nodeConfig.addTech(enbSourceMap); }); };
这个文件指定了在所有 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 了。以下是一个简单的示例代码:
var foo = function() { console.log('Hello, world!'); }; foo();
如果我们希望生成这段代码的 Source Map,我们可以执行以下命令:
./node_modules/.bin/enb make --no-cache
这个命令会生成一个包含 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