前言
在前端开发中，我们经常需要使用包管理工具来管理项目中的各种依赖包。而 npm 作为最常用的包管理工具之一，给我们带来了很多便捷。但是，当我们需要对某个包进行调试和开发时，每次改动后需要手动刷新浏览器，这样的操作会让我们的开发效率大大降低。为了解决这个问题，我们可以使用 broccoli-watchify 这个 npm 包。
什么是 broccoli-watchify
broccoli-watchify 是一个基于 broccoli 的 npm 包，它可以监听你正在开发的代码，并在代码更改时自动重建你的代码，并在浏览器中实时更新，从而提高你的效率。
使用方法
安装 broccoli-watchify
使用 npm 命令进行安装：
--- ------- ----------------- ----------
开始使用 broccoli-watchify
在使用 broccoli-watchify 之前，我们需要先对 broccoli 进行配置。我们创建一个名为 Brocfile.js 的文件，并在其中进行 broccoli 的配置。
--- --- - ------------------------------------
--- ----- - --------------------------------
--- --- - -------------------- -- --------------
--- ------- - ---------------------
--- ------ - --------------------
-- -- ---------- --
--- ---------- - ---------------
-- ------
--- --------- - --------------
-- ------
--- ---------- - -------
-- ---------
--- ----------- - --- --- --------------
-- - ---------- -------
--- ------- - ------------------ ------------
-- ------
--- ---------- - ------------- -
------- ----
-------- ---
---
-- ----------------- ---
-- ------------- -
--- -------- - -----------------------------
------- - ----------------- -
----------- ------------
----------- ---------
---
-
-- ----
--- ---------- - --------------- -------------
-------------- - -----------在代码中，我们通过 require 函数引入了 broccoli-static-compiler、broccoli-merge-trees 和 broccoli-watchify 这三个 npm 包。其中，broccoli-static-compiler 用于将静态文件复制到输出目录中，broccoli-merge-trees 用于合并多个树，broccoli-watchify 则是我们这篇文章的重点。
在配置中，我们首先分别配置了 JavaScript 和样式文件。然后通过 merge 函数将它们合并起来。我们还配置了输出目录为 dist，判断是否为开发环境并将静态文件目录 public 添加到最终的输出中。
在 development 为 true 的情况下，我们引入 broccoli-watchify，使用 watchify 函数对 appTree 进行配置。其中，inputFiles 表示需要监听的文件，outputFile 表示输出文件的路径。在最后我们再次使用 merge 函数将两个树进行合并，最终返回的是 outputTree。
示例代码
下面是一个简单的示例代码，我们编写了一个名为 main.js 的文件，并将它加入到了 app 目录下：
------------------ ---------
接下来，我们创建一个名为 scripts.js 的文件，用于 broccoli-watchify 的配置：
--- ----- - -------------------------------------
--- ------ - --------------------------------
-------------- - -------------- -
------ ------------ ---------- ----------- -
----------- ---------
-------- -----
----
--在代码中，我们使用了 broccoli-babel-transpiler 这个 npm 包，并通过 filter 函数过滤出所有的 JavaScript 文件。我们还可以在 options 中配置 sourceMaps 和 modules 等选项。
在终端中使用以下命令启动服务：
- -------- -----
在此基础上，我们再新开一个终端窗口，使用以下命令启动监听器：
- -------- -----
现在，可以在浏览器中打开 http://localhost:4200 查看效果了。每次修改代码后，页面都会自动刷新，我们可以很方便地查看效果了。
小结
使用 broccoli-watchify 可以大大提高我们的前端开发效率，毕竟重复手动刷新的操作太过于繁琐，而且还会分散我们的注意力。希望本篇文章能够帮助到读者，如果有疑问和建议，欢迎留言交流。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/5eedcc89b5cbfe1ea06127f9