点击下载
本文文档

当前位置：首页 - 科技 - 知识百科 - 正文

node.js监听文件变化的实现方法

来源：动视网责编：小采时间：2020-11-27 21:58:36

node.js监听文件变化的实现方法

node.js监听文件变化的实现方法:前言随着前端技术的飞速发展，前端开发也从原始的刀耕火种，向着工程化效率化的方向发展。在各种开发框架之外，打包编译等技术也是层出不穷，开发体验也是越来越好。例如HMR，让我们的更新可以即时可见，告别了手动F5的情况。其实现就是监听文件变化自动调

推荐度：

点击下载本文 文档为doc格式

导读node.js监听文件变化的实现方法:前言随着前端技术的飞速发展，前端开发也从原始的刀耕火种，向着工程化效率化的方向发展。在各种开发框架之外，打包编译等技术也是层出不穷，开发体验也是越来越好。例如HMR，让我们的更新可以即时可见，告别了手动F5的情况。其实现就是监听文件变化自动调

可以看到1、2两步，并没有实际修改内容，然而我们并没有办法区分。只要你是切换之后再保存，修改时间戳mtime就发生变化。

另外响应时间真的很慢，毕竟是轮询。

对于这些问题，其实官网也给了一句话：

Using fs.watch() is more efficient than fs.watchFile and fs.unwatchFile. fs.watch should be used instead of fs.watchFile and fs.unwatchFile when possible.

能用fs.watch的情况就不要用watchFile了。一是效率，二是不能准确获知修改状态三是只能监听单独文件
对于实际开发过程中，显然我们想要关注的是源文件夹的变动。

fs.watch

首先用法如下：

fs.watch(filename[, options][, listener])

跟fs.watchFile比较类似。

filename 显然就是文件名

options 可选对象或者字符串包含以下三个属性

persistent 文件被监听时进程是否继续，默认true

recursive 是否监控所有子目录，默认false 即当前目录，true为所有子目录。

encoding 指定传递给回调事件的文件名称，默认utf8

listener 事件回调包含两个参数

eventType 事件类型，rename 或者 change

filename 当前变更文件的文件名

options如果是字符串，指的是encoding。

监听filename对应的文件或者文件夹(recursive参数也体现出来这一特性)，返回一个fs.FSWatcher对象。

该功能的实现依赖于底层操作系统的对于文件更改的通知。所以就存在一个问题，可能不同平台的实现不太相同。
如下示例1：

const fs = require('fs')
const filePath = './' 
console.log(`正在监听 ${filePath}`);
fs.watch(filePath,(event,filename)=>{
 if (filename){
 console.log(`${filename}文件发生更新`)
 }
})

一个比较明显的优势就体现出来了：响应比较及时，相比于轮询，效率肯定更高。

不过这样修改并保存的时候回发现同样有点问题。

直接保存，显示两次更新

修改文件之后，同样显示两次更新(mac系统上是两次，其他系统可能有所差别)

这样可能是于操作系统对文件修改的事件支持有关，在保存的时候出发了不止一次。

下面聚焦于回调事件的参数，event对应事件类型，是否可以判断事件类型为change呢，才执行呢，忽略空保存。

const fs = require('fs')
const filePath = './' 
console.log(`正在监听 ${filePath}`);
fs.watch(filePath,(event,filename)=>{
 console.log(`event类型${event}`)
 if (filename && event == 'change') {
 console.log(`${filename}文件发生更新`)
 }
})

不过实际上，空的保存event也是change，另外不同平台event的实现可能也有所不同。这种方式要pass掉。

校验变更时间

显然从上面的例子可以看到，变更时间依然不可控。因为每次保存，node对应stat对象依然会修改。

对比文件内容

只能选择这种方式来判断是否是否更新。例如md5:

const fs = require('fs'),
 md5 = require('md5');
const filePath = './' 
let preveMd5 = null

console.log(`正在监听 ${filePath}`);
fs.watch(filePath,(event,filename)=>{
 var currentMd5 = md5(fs.readFileSync(filePath + filename))
 if (currentMd5 == preveMd5) {
 return
 }
 preveMd5 = currentMd5
 console.log(`${filePath}文件发生更新`)
})

先保存当前文件md5值，每次文件变化时(即保存操作响应之后)，每次都获取文件的md5然后进行对比，看是否发生变化。

不过这样可以看到，当初次保存时，都会执行一次，因为初始值为null的缘故。这样可以加个兼容，根据是否第一次保存来判断好了。

优化

对于不同的操作系统，可能保存时触发的回调不止一个(mac上到没出现)。为了避免这种实时响应对应的频繁触发，可以引入debounce函数来保证性能。

const fs = require('fs'),
 md5 = require('md5');
let preveMd5 = null,
 fsWait = false
const filePath = './' 
console.log(`正在监听 ${filePath}`);
fs.watch(filePath,(event,filename)=>{
 if (filename){
 if (fsWait) return;
 fsWait = setTimeout(() => {
 fsWait = false;
 }, 100)
 var currentMd5 = md5(fs.readFileSync(filePath + filename))
 if (currentMd5 == preveMd5){
 return 
 }
 preveMd5 = currentMd5
 console.log(`${filePath}文件发生更新`)
 }
})

结束语

到这里，node监听文件的实现就结束了。做个学习笔记，来做个参考记录。实现起来并不难，但是要实际应用的话需要考虑的方面就比较多了。还是推荐开源框架node-watch、chokidar等，各方面实现的都比较完善。

好了，

node.js监听文件变化的实现方法

推荐度：

点击下载本文 文档为doc格式

标签：实现文件夹的 node.js

热门焦点

node.js监听文件变化的实现方法

node.js监听文件变化的实现方法

node.js监听文件变化的实现方法

最新推荐

猜你喜欢

热门推荐