chokidar - chokidar 初识(初识案例演示、初识案例解读、初识案例测试)

发布于:2025-03-23 ⋅ 阅读:(31) ⋅ 点赞:(0)

一、chokidar

1、chokidar 概述
  1. chokidar 是一个用于监视文件系统变化的 Node.js

  2. chokidar 提供了一种简单、高效的方式来监视文件和目录的创建、修改、删除等操作

  3. chokidar 是是 fs.watchfs.watchFile方法 的增强版,解决了它们在一些平台上的不一致性和局限性

2、chokidar 的特点
  1. 跨平台的支持:chokidar 在 Windows、Linux、macOS 上都能很好地工作,并且处理了不同平台上的文件系统事件差异

  2. 丰富的 API:chokidar 提供了丰富的 API 来监听文件系统的各种变化,包括文件或目录的创建、修改、删除、重命名

  3. 灵活的配置:chokidar 可以通过配置选项来调整监视行为,例如,忽略某些文件、延迟事件触发等

  4. 高性能:chokidar 使用了原生文件系统事件(例如,inotify、kqueue 等)来提供高效的文件系统监视

3、chokidar 的适用场景
  1. 开发工具:在开发过程中自动重新编译、重新加载、重新运行测试等

  2. 文件同步:在文件发生变化时自动同步到其他位置或服务器

  3. 日志监控:实时监控日志文件的变化并进行分析或报警

  • chokidar 被许多流行的工具和框架使用,例如,Webpack、Vite、Gulp 等
4、chokidar 引入
  • 通过 npm 安装 chokidar
npm install chokidar

二、chokidar 初识案例

1、案例演示
const chokidar = require("chokidar");

const watcher = chokidar.watch(".", {
	ignored: /(^|[\/\\])\../,
	persistent: true,
	ignoreInitial: true,
});

watcher.on("add", (path) => {
	console.log(`文件被添加: ${path}`);
});

watcher.on("change", (path) => {
	console.log(`文件被修改: ${path}`);
});

watcher.on("unlink", (path) => {
	console.log(`文件被删除: ${path}`);
});

watcher.on("addDir", (path) => {
	console.log(`目录被添加: ${path}`);
});

watcher.on("unlinkDir", (path) => {
	console.log(`目录被删除: ${path}`);
});

watcher.on("all", (event, path) => {
	console.log(`事件: ${event}, 路径: ${path}`);
});
2、案例解读
(1)创建监视器
  1. 通过 require 引入 chokidar
const chokidar = require("chokidar");
  1. 创建监视器,监视当前目录(.)及其子目录中的文件和目录
const watcher = chokidar.watch(".", {
	ignored: /(^|[\/\\])\../,
	persistent: true,
	ignoreInitial: true,
});
配置项 说明
ignored:... 忽略以点(.)开头的文件或目录(例如,.git.env 等)
persistent: true 持续监视文件系统
ignoreInitial: true 忽略初始扫描时的事件,如果设置为 false,则会在启动监视器时触发所有现有文件的事件
(2)监听事件
  1. 监听文件添加事件
watcher.on("add", (path) => {
	console.log(`文件被添加: ${path}`);
});
  1. 监听文件修改事件
watcher.on("change", (path) => {
	console.log(`文件被修改: ${path}`);
});
  1. 监听文件删除事件
watcher.on("unlink", (path) => {
	console.log(`文件被删除: ${path}`);
});
  1. 监听目录添加事件
watcher.on("addDir", (path) => {
	console.log(`目录被添加: ${path}`);
});
  1. 监听目录删除事件
watcher.on("unlinkDir", (path) => {
	console.log(`目录被删除: ${path}`);
});
  1. 监听所有事件
watcher.on("all", (event, path) => {
	console.log(`事件: ${event}, 路径: ${path}`);
});
3、案例测试
  1. 在当前目录,新建 test.txt 文件,输出结果
文件被添加: test.txt
事件: add, 路径: test.txt
  1. 在当前目录,修改 test.txt 文件,输出结果
文件被修改: test.txt
事件: change, 路径: test.txt
  1. 在当前目录,删除 test.txt 文件,输出结果
文件被删除: test.txt
事件: unlink, 路径: test.txt
  1. 在当前目录,新建 test 目录,输出结果
目录被添加: test
事件: addDir, 路径: test
  1. 在当前目录,删除 test 目录,输出结果
目录被删除: test
事件: unlinkDir, 路径: test