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


Posted in Javascript onApril 17, 2019

前言

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

场景

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

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

node原生API

fs.watchFile

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

fs.watchFile(filename[, options], listener)
  • filename 显然就是文件名
  • options 可选 对象 包含以下两个属性
    • persistent 文件被监听时进程是否继续,默认true
    • interval 多长时间轮训一次目标文件,默认5007毫秒
  • listener 事件回调 包含两个参数
    • current 当前文件stat对象
    • prev 之前文件stat对象

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

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

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

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

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

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

const fs = require('fs')
const filePath = './index.js'
console.log(`正在监听 ${filePath}`);
fs.watchFile(filePath, (cur, prv) => {
 if (filePath) {
  // 打印出修改时间
  console.log(`cur.mtime>>${cur.mtime.toLocaleString()}`)
  console.log(`prv.mtime>>${prv.mtime.toLocaleString()}`)
  // 根据修改时间判断做下区分,以分辨是否更改
  if (cur.mtime != prv.mtime){
   console.log(`${filePath}文件发生更新`)
  }
 }
})

然后测试结果如下:

// 运行
node watch1.js
// 1、访问index.js 不做修改,然后保存
// 2、切换文件,再次访问,不做修改,只报错
// 3、编辑内容,并保存

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

可以看到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系统上是两次,其他系统可能有所差别)

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

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

下面聚焦于回调事件的参数,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然后进行对比,看是否发生变化。

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

不过这样可以看到,当初次保存时,都会执行一次,因为初始值为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文档
  • How to Watch for Files Changes in Node.js
  • Nodejs Monitor File Changes
Javascript 相关文章推荐
js类中获取外部函数名的方法与代码
Sep 12 Javascript
js 图片等比例缩放代码
May 13 Javascript
Jquery多选下拉列表插件jquery multiselect功能介绍及使用
May 24 Javascript
jquery及原生js获取select下拉框选中的值示例
Oct 25 Javascript
解析Node.js异常处理中domain模块的使用方法
Feb 16 Javascript
Jquery根据浏览器窗口改变调整大小的方法
Feb 07 Javascript
利用Vue v-model实现一个自定义的表单组件
Apr 27 Javascript
JS判断Android、iOS或浏览器的多种方法(四种方法)
Jun 29 Javascript
JS获取指定月份的天数两种实现方法
Jun 22 Javascript
Layui 动态禁止select下拉的例子
Sep 03 Javascript
js实现简易ATM功能
Oct 27 Javascript
小程序自定义圆形进度条
Nov 17 Javascript
vue中格式化时间过滤器代码实例
Apr 17 #Javascript
postman自定义函数实现 时间函数的思路详解
Apr 17 #Javascript
vue指令之表单控件绑定v-model v-model与v-bind结合使用
Apr 17 #Javascript
记一次Vue.js混入mixin的使用(分权限管理页面)
Apr 17 #Javascript
详解js获取video任意时间的画面截图
Apr 17 #Javascript
解决vue跨域axios异步通信问题
Apr 17 #Javascript
自定义Vue中的v-module双向绑定的实现
Apr 17 #Javascript
You might like
浅析Mysql 数据回滚错误的解决方法
2013/08/05 PHP
一个显示效果非常不错的PHP错误、异常处理类
2014/03/21 PHP
PHP常用技术文之文件操作和目录操作总结
2014/09/27 PHP
Code:findPosX 和 findPosY
2006/12/20 Javascript
javascript 面向对象编程基础:封装
2009/08/21 Javascript
JQuery 表单中textarea字数限制实现代码
2009/12/07 Javascript
JS限制上传图片大小不使用控件在本地实现
2012/12/19 Javascript
解决window.opener=null;window.close(),只支持IE6不支持IE7,IE8的问题
2014/01/14 Javascript
jQuery学习笔记之toArray()
2014/06/09 Javascript
详解js跨域原理以及2种解决方案
2015/12/09 Javascript
javascript中的面向对象
2017/03/30 Javascript
IntersectionObserver实现图片懒加载的示例
2017/09/29 Javascript
axios发送post请求springMVC接收不到参数的解决方法
2018/03/05 Javascript
vue用BMap百度地图实现即时搜索功能
2019/09/26 Javascript
vue移动端使用canvas签名的实现
2020/01/15 Javascript
JavaScript中while循环的基础使用教程
2020/08/11 Javascript
python的id()函数解密过程
2012/12/25 Python
python获取本机mac地址和ip地址的方法
2015/04/29 Python
浅谈python多线程和队列管理shell程序
2015/08/04 Python
Python3.5面向对象与继承图文实例详解
2019/04/24 Python
python开发之anaconda以及win7下安装gensim的方法
2019/07/05 Python
python中selenium操作下拉滚动条的几种方法汇总
2019/07/14 Python
运行tensorflow python程序,限制对GPU和CPU的占用操作
2020/02/06 Python
Python中使用socks5设置全局代理的方法示例
2020/04/15 Python
Python基础教程之输入输出和运算符
2020/07/26 Python
详解window.open被浏览器拦截的解决方案
2019/07/18 HTML / CSS
彪马英国官网:PUMA英国
2019/02/11 全球购物
文明礼仪事迹材料
2014/01/09 职场文书
酒店行政人事部经理职务说明书
2014/02/26 职场文书
社区母亲节活动记录
2014/03/06 职场文书
教师批评与自我批评材料
2014/10/16 职场文书
学习保证书100字
2015/02/26 职场文书
公积金贷款承诺书
2015/04/30 职场文书
少年雷锋观后感
2015/06/10 职场文书
穆斯林的葬礼读书笔记
2015/06/26 职场文书
Python进程池与进程锁之语法学习
2022/04/11 Python