前言
在前端开发中，我们经常需要对文件进行监听，做出相应的处理。例如，当我们修改了一个 CSS 文件时，需要自动编译成压缩后的 CSS 文件，并刷新浏览器。此时，npm 包 watchr 可以帮助我们实现文件的监听功能。
watchr 简介
watchr 是一个轻量级的 Node.js 库，用于监听文件系统事件。它可以监听文件的变化、重命名、删除等多种事件，并且支持递归监听目录下的所有文件。
安装 watchr
首先，我们需要安装 watchr。打开终端，输入以下命令：
npm install watchr --save-dev
这里使用了 --save-dev 参数，表示将 watchr 安装为开发依赖。
使用 watchr
安装完成后，我们就可以开始使用 watchr 了。首先，创建一个监听文件的脚本 watch.js，代码如下：
-- -------------------- ---- -------
----- ----- - ------------------
-------------
------ ----------
---------- -
---- ------------
------ --------------
------- ----------- --------- ---------------- ----------------- -- -
------------------------ --- ---- ---------------
-------------------- ----- -------------------------------------
--------------------- ----- --------------------------------------
-
--
---在上面的代码中，我们使用 watch.watch() 方法来创建一个监听器。其中：
paths表示要监听的路径，这里我们监听了./src目录下的所有文件。listeners是一个对象，包含了三个监听事件：log用于接收日志输出，这里我们直接将日志输出到控制台。error用于接收错误输出，这里我们也直接将错误输出到控制台。change用于接收文件变化事件，它有四个参数：事件名、文件路径、当前状态和之前状态。在本例中，我们将这些信息都输出到控制台。
接下来，在终端中执行以下命令：
node watch.js
此时，watchr 就开始监听 ./src 目录下的文件变化了。当有文件发生变化时，就会在控制台输出相应的信息。
实战应用
上面的例子只是演示了如何使用 watchr 进行文件的监听。在实际开发中，我们可以结合其他工具，实现更为复杂的功能。
例如，我们可以结合 webpack 和 browser-sync，实现自动编译并刷新浏览器的功能。代码如下：
-- -------------------- ---- -------
----- ------- - -------------------
----- ----------- - ------------------------
----- ----- - ------------------
----- ------ - -------------------------------
-- -- ------- ---
----- -------- - ----------------
-- -- ------------ ---
----- -- - ---------------------
-------------
------ ----------
---------- -
------- -- -- -
----------------- -------- ----- ---------------
------------------ ------ -- -
-- ----- -
-------------------
-------
-
----------------------------
------- ------
------- ----
----
-------------------- -------- --------- -------------
------------
---
-
--
---
-- -- ------------ ------------- ------
---------
------- -
-------- --------
-
---在上面的代码中，我们首先创建了一个 webpack 编译器和一个 browser-sync 服务器。然后，通过 watchr 监听 ./src 目录下的文件变化。当有文件变化时，就进行自动编译，并刷新浏览器。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/41936