在前端开发中，当我们需要在本地开发环境中进行代码实时预览时，往往需要频繁修改本地文件并手动刷新浏览器。然而这种方式非常繁琐且效率低下，因此我们通常会使用一些自动构建工具来监听文件变化并自动更新页面。Node.js 是一个非常强大的平台，可以为我们提供许多便捷的工具和库以简化我们的开发流程。其中，node-watch 是一个非常出色的 npm 包，它可以帮助我们轻松地监听本地文件的变化。
安装
首先，我们需要在项目中安装 node-watch 包。
npm install --save-dev node-watch
使用
接下来，我们将介绍如何使用 node-watch 监听文件变化。
1. 监听单个文件
我们可以使用以下代码来监听单个文件的变化：
const watch = require('node-watch');
watch('./file.txt', function(evt, name) {
console.log('%s changed.', name);
});上述代码会监听当前目录下的 file.txt 文件，并在文件被修改时打印出一条日志。
2. 监听整个目录
如果要监听整个目录下的文件变化，可以使用以下代码：
watch('./src', { recursive: true }, function(evt, name) {
console.log('%s changed.', name);
});上述代码会监听当前目录下的 src 目录以及它的子目录中所有文件的变化，并在文件被修改时打印出一条日志。
3. 过滤文件
如果只需要监听某些特定类型的文件，我们可以使用正则表达式来过滤文件。例如，以下代码只会监听 .js 文件：
watch('./src', { filter: /\.js$/ }, function(evt, name) {
console.log('%s changed.', name);
});4. 使用 options 对象
除了上述参数外，node-watch 还支持许多其他的配置项，可以通过传递一个 options 对象来设置这些选项。例如，以下代码将监听所有 .js 和 .css 文件，并且在文件变化后延迟 500 毫秒再执行回调函数：
watch('./src', {
recursive: true,
filter: /\.(js|css)$/,
delay: 500,
}, function(evt, name) {
console.log('%s changed.', name);
});示例代码
最后，我们提供一个完整的示例代码，展示如何使用 node-watch 监听 src 目录下所有 .js 文件的变化，并在文件发生变化时自动编译 TypeScript 并刷新浏览器。
-- -------------------- ---- -------
----- ----- - ----------------------
----- ---- - ------------------------------
----- ----------- - ---------------------------------
-------------- -
---------- -----
------- --------
-- ------------- ----- -
--------------- -------- --------- --------------- ------
----------- ---------- -
---------------------
----------------------- -------- --- ------- -------------
---
---
------------------
------- -----
------ ---------------- ---------------
---以上代码中，我们使用 child_process 库的 exec 函数来执行 tsc 命令编译 TypeScript。然后，我们使用 browser-sync 库在本地启动一个 Web 服务器，并监视 index.html 和 dist 目录下所有 JavaScript 文件的改变。在监听到任何 .js 文件的变化时，都会自动重新编译 TypeScript 并刷新浏览器。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/44458