NPM包chokidar创建文件时触发add和change两次事件的问题

问题原因 #

多数编辑器创建文件时会分两步操作：先创建空文件触发add事件，接着写入文件内容触发change事件，所以你的监听逻辑会两次调用handleFileRequest。

解决方案 #

方案1：使用防抖函数限制重复执行

通过防抖函数，确保短时间内同一文件的多次事件触发只会执行一次处理函数。可以用现成工具库，也可以自己实现简单逻辑：

用lodash实现：

const _ = require('lodash');
const debouncedHandle = _.debounce(handleFileRequest, 100); // 100ms内重复调用只执行最后一次

watcher.on('add', debouncedHandle);
watcher.on('change', debouncedHandle);

自己实现防抖：

let timeoutId;
function debouncedHandle(path) {
  clearTimeout(timeoutId);
  timeoutId = setTimeout(() => {
    handleFileRequest(path);
  }, 100);
}

watcher.on('add', debouncedHandle);
watcher.on('change', debouncedHandle);

方案2：配置Chokidar的awaitWriteFinish选项

Chokidar提供了awaitWriteFinish配置项，它会等待文件写入操作完成、状态稳定后再触发事件，避免捕获到中间的临时修改事件：

const watcher = chokidar.watch('./your-target-path', {
  awaitWriteFinish: {
    stabilityThreshold: 200, // 等待文件状态稳定200ms
    pollInterval: 100 // 每隔100ms检查一次文件状态
  }
});

watcher.on('add', handleFileRequest);
watcher.on('change', handleFileRequest);

开启这个配置后，创建文件时只会触发一次add事件（文件写入完成后触发），不会再额外触发change事件。

内容的提问来源于stack exchange，提问作者Amarjit Singh