npm 包 devtools-live-browserify-unpack 使用教程

前言

前端开发者总是需要不同的工具和技术来简化工作流和提高生产力。其中，无论是开发、调试还是测试都离不开 NPM 包的使用。

在本文中，我们要介绍的是一个名为 devtools-live-browserify-unpack 的 NPM 包，它可以在浏览器端轻松地调试和解压缩 Browserify 打包的 JavaScript 代码。本文将详细介绍如何安装、配置和使用该包，旨在为初学者提供指导性学习。

devtools-live-browserify-unpack 简介

devtools-live-browserify-unpack 是一个 NPM 包，它的功能是在浏览器中通过 DevTools 动态解压缩和运行 Browserify 打包的 JavaScript 代码。

使用 devtools-live-browserify-unpack 可以极大地简化开发和调试过程，避免因代码打包而造成的麻烦和不必要的耗时。本文将为您展示如何使用 devtools-live-browserify-unpack，使您在浏览器端快速高效地进行开发和调试。

安装 devtools-live-browserify-unpack NPM 包

首先，我们需要使用 npm install 命令安装 devtools-live-browserify-unpack 包，在命令行中输入以下指令：

npm install -g devtools-live-browserify-unpack

配置 devtools-live-browserify-unpack

安装完 package 后，我们需要为其进行一些配置，以便于使用。

首先，在我们的项目根目录下新建一个 index.js 文件，并在其中写入以下代码：

var fs = require('fs');
var browserify = require('browserify');

var b = browserify();
b.add('./app.js');
b.bundle().pipe(fs.createWriteStream('bundle.js'));

然后，我们可以使用以下命令将其编译为 JavaScript：

node index.js

这时候我们的项目目录下就会生成 bundle.js 文件，在浏览器端我们想要调试的代码就被打包在这个文件里了。

接下来，我们需要在 index.html 中引入该文件以便于使用 devtools-live-browserify-unpack。在 index.html 中添加以下代码：

<script src="bundle.js"></script>
<script src="https://rawgit.com/jacoblwe20/devtools-live-browserify-unpack/master/index.js"></script>

其中，“jacoblwe20”是 devtools-live-browserify-unpack 作者的 GitHub 用户名。上面的代码块为使用者提供了解压缩打包文件的能力。

现在我们配置完了，下面让我们来看一下如何使用该包进行开发和调试。

使用 devtools-live-browserify-unpack

接下来，让我们来学习如何使用 devtools-live-browserify-unpack，以及其中一些重要的特性和功能。

打开浏览器并打开 DevTools，进入 Sources 选项卡，找到我们要调试的代码，然后右键单击 JavaScript 文件，选择 “devtools live browserify unpack”：

这样就开始了解压缩 JS 文件的过程，在下图中可以看到已经解压到的文件：

现在，我们就可以在没有编译或重启的情况下，直接修改源代码并在 DevTools 中查看它们的效果，代码实时运行，这样极大地提高了我们的开发效率。

总结

在本文中，我们介绍了一个名为 devtools-live-browserify-unpack 的 NPM 包，它能够帮助我们在浏览器中快速地调试和解压缩 Browserify 打包的 JavaScript 代码。

从安装、配置到使用，我们都给出了详细的步骤和指令，以助您快速掌握使用此工具的方法。希望本文对于您在开发和调试过程中提高效率和质量有所帮助。

示例代码

index.js：

var fs = require('fs');
var browserify = require('browserify');

var b = browserify();
b.add('./app.js');
b.bundle().pipe(fs.createWriteStream('bundle.js'));

index.html：

-- -------------------- ---- -------
--------- -----
----- ----------
------
    ----- ----------------
    ----------------------------------------------
-------
------
    ------- -------------------------
    ------- ---------------------------------------------------------------------------------------------
-------
-------

打开开发者工具，右键单击 JavaScript 文件，选择 “devtools live browserify unpack” 即可开始运行修改后的代码并实现实时预览。

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005575081e8991b448d4482