前言
@parcel/watcher 是一个 npm 包，提供了一种监视文件系统中文件和目录变化的方法。它是 Parcel 构建工具中使用的默认的监视器实现，可以实时检测到任何页面和依赖的文件变化，并重新构建应用程序。
本篇文章将介绍如何使用 @parcel/watcher 监视文件系统的变化并做出反应。我们将从基本概念开始，并提供示例代码以帮助您更好地理解。
安装
您可以使用 npm 来安装 @parcel/watcher。
npm install @parcel/watcher --save-dev
示例
在使用 @parcel/watcher 前，您需要在代码中引入它。以下是一个简单的示例：
-- -------------------- ---- ------- ----- - -------------- - - --------------------------- --- ------- - --- ----------------------------- - -------- ----------- --------- ----- --- ----------------- ---- -- - ----------------- ------- --- ---- -------- --- -------------------- ---- -- - ----------------- ------- --- ---- ---------- --- -------------------- ---- -- - ----------------- ------- --- ---- ---------- --- ----------------
在这个示例中，我们引入了 DefaultWatcher，并在指定的目录中创建了监视器。我们监听监视器对象的事件，并在发生相应的事件时打印一条消息。
监视器开始工作通过调用 start() 方法。它将开始监视文件系统中对应目录中的文件和目录变化。
事件
DefaultWatcher 提供了三种事件：add、unlink 和 change。当文件系统中的文件或目录发生变化时会触发相应的事件处理函数。
add
在文件系统中添加文件或目录时触发。事件处理程序将接收添加的路径作为参数。
例如，我们可以使用以下示例来监听与开发相关的目录下的所有文件和目录。
watcher.on('add', path => {
console.log(`File/Folder ${path} has been added`);
});unlink
在文件系统中删除文件或目录时触发。事件处理程序将接收被删除的路径作为参数。
例如，我们可以使用以下示例来监听与开发相关的目录下的所有文件和目录。
watcher.on('unlink', path => {
console.log(`File/Folder ${path} has been removed`);
});change
在文件系统中文件或目录的内容发生更改时触发。事件处理程序将接收新的路径作为参数。
例如，我们可以使用以下示例来监听与开发相关的目录下的所有文件和目录。
watcher.on('change', path => {
console.log(`File/Folder ${path} has been changed`);
});总结
在本文中，我们介绍了如何使用 @parcel/watcher npm 包来监视文件系统的变化，并在变化发生时做出反应。我们提供了示例代码和事件处理程序来演示如何使用 add、unlink 和 change 事件。在项目中使用 @parcel/watcher 修改之后，您可以有效地进行本地测试，并获得更多的反馈信息。
参考
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/5eedaf6ab5cbfe1ea0611026