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

　　


　　

　　

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

　　


　　

　　

假定要监听指数。js,每当内容更改重新编译。
　　

　　

我们就用简单的控制台来标识执行编译。下面就是实现该功能。

　　


　　

　　

<强> fs。watchFile
　　

　　

翻下节点的文档就会看到一个满足我们需求的Apifs.watchFile(毕竟是文件相关的操作,很大可能就在fs模块下面了)。

　　 　　 　　fs。watchFile(文件名[选项],侦听器) 　　 　　
    　　<李>文件名显然就是文件名李 　　<李>选项可选对象包含以下两个属性 　　
      　　<李>持久文件被监听时进程是否继续,默认真李 　　<李>间隔多长时间轮训一次目标文件,默认5007毫秒李 　　
    　　李 　　<李>侦听器事件回调包含两个参数 　　
      　　<李>当前当前文件统计对象李 　　<李> prev之前文件统计对象
      　　李 　　
    　　李 　　
　　

看完参数信息,不知道大家有没有从其参数属性中得到点什么特别的信息。特别是间隔选项和侦听器中的回调参数。

　　

监控文件名对应文件,每当访问文件时会触发回调。

　　

这里每当访问文件时会触发,实际指的是每次切换之后再次进入文件,然后保存之后,无论是否做了修改都会出发回调。

　　

另外轮询事件和文件对象,是不是可以猜测,其实现监听的原理,固定时间轮询文件状态,然后将前后的状态返回,将判断交给使用者。
　　

　　

所以节点也建议,如果要获取文件修改,那么需要根据统计对象的修改时间来进行对比,即比较咕咕叫。mtime和prev.mtime .

　　

这样就有点问题,我们先看下例子,会更清晰一点。

　　 　　 　　const fs=要求(fs) 　　const filePath='/index.js’。 　　控制台。日志(“正在监听$ {filePath} '); 　　fs。watchFile (filePath (cur,减压阀)=比;{ 　　如果(filePath) {//打印出修改时间 　　console.log (', cur.mtime>的在$ {cur.mtime.toLocaleString ()}”) 　　console.log (', prv.mtime>的在$ {prv.mtime.toLocaleString ()}”)//根据修改时间判断做下区分,以分辨是否更改 　　如果(cur.mtime !=prv.mtime) { 　　console.log (“$ {filePath}文件发生更新”) 　　} 　　} 　　}) 　　 　　

然后测试结果如下:

　　
　　

//运行
　　节点watch2。js
//1、访问指数。js不做修改,然后保存
//2,切换文件,再次访问,不做修改,只报错
//3、编辑内容,并保存

　　 　　

节点。js监听文件变化的实现方法
　　

　　

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

　　

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

　　

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

　　
　　

使用fs.watch()比fs更有效率。watchFile fs.unwatchFile。fs。看应该用来代替fs。watchFile和fs。unwatchFile时可能的。
　　

　　 　　

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

　　

<强> fs。看
　　

　　

首先用法如下:

　　 　　 　　fs。手表(文件名[选项][,侦听器]) 　　 　　

跟fs.watchFile比较类似。

　　
    　　<李>文件名显然就是文件名李 　　<李>选项可选对象或者字符串包含以下三个属性 　　
      　　<李>持久文件被监听时进程是否继续,默认真李 　　<李>递归是否监控所有子目录,默认假即当前目录,真正为所有子目录。 　　<李>编码指定传递给回调事件的文件名称,默认utf8李 　　
    　　李 　　<李>侦听器事件回调包含两个参数