前言

我们平时在开发代码时，很多构建工具在我们保存本地代码时都可以做到实时上传或者实时刷新页面，那么大家有没有想过构建工具是如何做到的？

想做到这一点，就需要实时监听本地文件的增删改，掌握这些时机就可以做到在文件改变时热更新或者实时上传。

下面我们就来聊一聊如何监听本地文件的变动！

原理

其实这些构建工具都是在用一个包chokidar，下面我们来看看如何使用它！

图1

如图1，我们引入chokidar这个包，并且使用all事件监听当前文件夹，下面我们来操作一把！

图2

从图2中我们发现，对dist目录下的任何文件或者目录的改动都会被all监听到

• 增加文件时，显示的事件名是add，并且显示对应的文件名；
• 修改文件内容时，显示的事件名是change，并且显示对应的文件名；
• 增加目录时，显示的事件名是addDir，并且显示对应的目录名；
• 删除文件时，显示的事件名是unlink，并且显示对应的文件名；
• 删除目录时，显示的事件名是unlinkDir，并且显示对应的目录名；

all事件是一个总的事件，在被监听的目录下的任何操作都会触发这个事件，其实我们可以更有针对性的去监听某一项操作！

图3

如图3，如果业务中不需要监听所有的事件，我们可以把事件拆开！上图中ready事件是在监听程序启动完成后触发，raw事件和all事件一样在每个操作后都会被触发，它主要显示更具体的文件或者目录信息。

图4

后期还可以通过add方法针对性的补充要监听的文件，也可以使用unwatch去除不想要监听的文件（不过据我测试unwatch没有生效）。

此模块还有一些配置选项，如下：

let watcher = chokidar.watch('.', {
        persistent: false,
        ignoreInitial: false,
        useFsEvents: false,
        usePolling: true,
        followSymlinks: false,
        awaitWriteFinish: {
        stabilityThreshold: 2000,
        pollInterval: 100
    }
});

• persistent默认是true，如果设置成false，程序就不会一直处于监听状态，运行完就结束；
• ignoreInitial默认是false，如果设置成true，程序初始化运行时就不会触发add/addDir事件；
• useFsEvents在mac上默认是true，底层使用fsevent接口，轻量且更加高效；
• usePolling默认false，底层使用fs.watchFile或者fs.watch进行轮询，此方式较慢且不太可靠，有可能占用很大的cpu；
• followSymlinks默认是true，主要是对软连接做监听，如果设为false，那么对软连接的源文件修改将不会触发事件；
• awaitWriteFinish默认是false，可以将其设置成一个对象，对象有两个属性，一个是stabilityThreshold表示文件操作节流的时间，如果你文件操作比较频繁，每次都触发事件会影响性能，通过节流方式只有在此时间内不存在操作才能触发事件，另外一个属性是pollInterval，文件大小轮询间隔，它们都是以毫秒为单位。

以上的参数都是我认为比较难理解的，此处我挑出来重点介绍！

总结

监听文件是一个很常见的功能，获取到文件变动的事件后我们可以做很多事情，比如有的编辑器可以在文件修改保存后自动格式化，自动做语法校验等等，能力的实际应用需要我们在业务中去寻找！