前言
随着前端工程化的深入发展，前端开发中不可避免要通过代码监听文件夹变化并进行相关处理。本文将介绍如何使用 npm 包 @types/chokidar 实现文件夹的监听功能，让你的前端开发更加高效。
安装
在开始使用 @types/chokidar 之前，我们需要先安装它。打开终端，进入你的项目路径，执行以下命令完成安装：
npm install @types/chokidar
安装完成后，你就可以在你的项目中使用 @types/chokidar 了。
基本使用
在使用 @types/chokidar 之前，我们需要先了解一些基本概念和用法。
Watcher
Watcher 是 @types/chokidar 的核心对象，它是用来监听文件夹变化的。你可以创建多个 Watcher 实例来监听多个文件夹或者文件，比如监听 CSS 文件夹和 JavaScript 文件夹。
Event
当 Watcher 监听到文件夹中有文件变化时，它会触发一些事件。这些事件包括：add, addDir, change, unlink, unlinkDir。这些事件分别对应文件或文件夹被添加、文件或文件夹被修改、文件或文件夹被删除。
方法
除了监听事件之外，Watcher 还有一些辅助方法。这些方法包括：add, addGlob, unwatch, getWatched 等。其中，add 和 addGlob 方法用来添加监听路径，unwatch 方法用来取消监听，getWatched 方法用来获取 Watcher 监听的路径。
示例代码
接下来，我们将通过以下示例代码来进一步了解 @types/chokidar 的使用方法。
监听文件夹中的所有文件
import chokidar from "chokidar";
const watcher = chokidar.watch("./app");
watcher
.on("add", path => console.log(`File ${path} has been added`) )
.on("change", path => console.log(`File ${path} has been changed`) )
.on("unlink", path => console.log(`File ${path} has been removed`) );在这个示例中，我们创建了一个 Watcher 实例并监听了 ./app 文件夹中的所有文件。通过 on 方法监听了 add, change, unlink 事件，并分别输出了对应的日志。
监听指定类型的文件
-- -------------------- ---- ------- ------ -------- ---- ----------- ----- ------- - --------------------------------- - -------- ----------- ----------- ---- --- ------- ---------- ---- -- ----------------- ------- --- ---- ------- - ------------- ---- -- ----------------- ------- --- ---- --------- - ------------- ---- -- ----------------- ------- --- ---- --------- --
在这个示例中，我们监听了 ./src 文件夹中的所有后缀为 .less 的文件。通过 ignored 参数忽略了 .less 文件夹中以 . 开头的文件或文件夹。persistent 参数设置为 true，表示 Watcher 将在监听到文件夹中变化后继续进行监听。
取消监听
-- -------------------- ---- ------- ------ -------- ---- ----------- ----- ------- - --------------------------------- - -------- ----------- ----------- ---- --- -------------------- ---- -- ----------------- ------- --- ---- --------- -- -- ---- -----------------------------------
在这个示例中，我们创建了一个 Watcher 并监听了 "./src/**/*.less" 事件。在监听到 unlink 事件后，输出了日志。最后我们使用 unwatch 方法取消了 "./src/**/*.less" 的监听。
结语
以上就是本文介绍的 @types/chokidar 的基本功能和用法。通过学习和使用 @types/chokidar，你可以更好的监听前端开发中的文件夹变化，提高你的开发效率。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/139649