在开发前端代码时，我们经常需要在调试时查看源码，但是现在大部分的前端代码都是打包压缩过的，这不仅会使得项目的体积更小，也会使得调试时变得困难。为了解决这个问题，我们可以使用 sourcemap 技术来将压缩后的代码和源代码进行关联。
在使用 sourcemap 技术时，我们可以使用 sourcemapify 这个 npm 包。下面是一份 sourcemapify 的使用教程。
安装
要使用 sourcemapify，我们需要先安装它。可以使用 npm 命令来进行安装。
npm install sourcemapify --save-dev
添加 --save-dev 是因为我们只在开发阶段使用它。
使用
sourcemapify 是 browserify 的一个插件，因此我们首先需要将我们的代码用 browserify 进行打包。
browserify index.js -o bundle.js
这个命令将会将 index.js 打包成 bundle.js。
接着，我们需要使用 sourcemapify 插件来生成 sourcemap。
browserify index.js -o bundle.js -p [ sourcemapify --map-output bundle.js.map]
这个命令中的 -p 参数表示使用插件，sourcemapify 表示使用 sourcemapify 插件，--map-output 参数指定生成的 sourcemap 文件的输出路径。
最后，我们需要在 HTML 文件中引入打包后的 JS 和 sourcemap。
<script src="bundle.js"></script> <script src="bundle.js.map"></script>
现在，我们就可以在浏览器中方便地查看源码了。
示例代码
下面是一份示例代码，它将会打印出一个名为 Hello, world! 的字符串。
function helloWorld() {
console.log('Hello, world!');
}
helloWorld();使用 sourcemapify 后，在浏览器中查看源码，我们将会看到下面这段源码。
function helloWorld() {
console.log('Hello, world!');
}
helloWorld();
//# sourceMappingURL=bundle.js.map在浏览器中打开控制台，我们会看到输出了 Hello, world! 这个字符串。
总结
sourcemapify 是一个非常方便的工具，它可以帮助我们在调试时更加方便地查看源码。在实际的项目中，我们也可以应用这个工具来提高我们的开发效率。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/62125