Deno 是一个基于 Rust 和 V8 引擎开发的 JavaScript 和 TypeScript 运行时，它提供了一些强大的工具和 API 让我们可以方便地进行文件操作、网络通信、模块管理等前端开发任务。其中，文件监视器是一个非常有用的工具，可以在文件和目录发生变化时通知我们，并执行一些指定的操作，如重新编译代码或重新加载页面等。本文将介绍如何在 Deno 中使用文件监视器，并提供一些示例代码和使用技巧。
安装 Deno
首先，我们需要在本地安装 Deno。可以通过官方文档中提供的方式进行安装，也可以使用包管理器如 Homebrew 或 Scoop 进行安装。安装完成后，可以在终端或命令行窗口中输入 deno --version 检查是否安装成功。
文件监视器的基本使用
Deno 提供了 Deno.watchFs 方法可以用于创建文件监视器，并添加指定的文件或目录进行监视。该方法的基本语法为：
const watcher = Deno.watchFs(paths: string | string[], options?: WatchOptions): AsyncIterable<WatchEvent>;
其中，paths 参数可以是一个字符串或字符串数组，表示要监视的文件或目录路径。options 参数则是一个可选的配置对象，用于设置监视器的一些选项，如递归监视、忽略文件或目录等。返回值是一个异步迭代器，可以通过 for-await-of 循环获取监视事件，并执行相关操作。
下面是一个非常简单的示例，演示如何创建一个文件监视器，并监听文件的变化：
// 监视文件的变化
const watcher = Deno.watchFs("./index.html");
// 循环获取监视事件
for await (const event of watcher) {
console.log(event);
}运行该代码并修改 index.html 文件，可以在终端中看到类似如下的输出：
{ kind: "modify", paths: [ "/path/to/index.html" ] }该输出表示 index.html 文件被修改了。其中，kind 字段表示监视的事件类型，通常有以下几种值：
create: 表示新建了一个文件或目录；modify: 表示修改了一个文件或目录的内容；remove: 表示删除了一个文件或目录；rename: 表示重命名或移动了一个文件或目录。
paths 字段则是一个路径数组，表示发生变化的文件或目录的路径。
接下来，我们可以根据 kind 值进行相应的操作。例如，假设我们要在文件被修改时实现自动重载页面的功能，可以修改代码如下：
-- -------------------- ---- -------
-- -------
----- ------- - -----------------------------
-- --------
--- ----- ------ ----- -- -------- -
-- ----------- --- --------- -
-------------------------
-
-这样，每当 index.html 文件被修改时，就会自动重新加载页面。
更高级的配置选项
除了基本使用方式外，Deno.watchFs 方法还支持更多的配置选项，用于满足不同的需要。下面列举了部分常用的选项。
递归监视
默认情况下，Deno.watchFs 方法只会监视指定的文件或目录，而不会监视其子目录。如果要监视所有子目录中的文件变化，可以将 options 参数中的 recursive 字段设置为 true：
// 监视目录及其子目录的变化
const watcher = Deno.watchFs("./src", { recursive: true });这样，无论 ./src 目录中的哪个文件被修改，都会触发监视器。不过，递归监视可能会导致性能问题，因此需要谨慎使用。
忽略文件或目录
有些文件或目录可能不需要进行监视，例如测试代码、临时文件等。可以通过 options 参数中的 exclude 字段配置要忽略的文件或目录：
// 忽略 .test 和 .tmp 的文件或目录
const watcher = Deno.watchFs(".", { exclude: [/(^|[\\/])\.[^\\/]/, /\.test/, /\.tmp/] });在上面的代码中，我们使用一个正则表达式数组，分别匹配以 . 开头的文件或目录名、以 .test 结尾的文件或目录名和以 .tmp 结尾的文件或目录名，将它们忽略掉。
缓冲延迟
由于文件变化可能会非常频繁，如果不适当地处理，会导致程序频繁触发操作，降低性能。因此，可以通过 options 参数中的 bufferDelay 字段设置缓冲延迟时间，以防止频繁触发操作：
// 设置缓冲延迟时间为 500 毫秒
const watcher = Deno.watchFs(".", { bufferDelay: 500 });这样，只有文件变化后，经过 500 毫秒后仍未发生变化，才会触发操作。
示例代码
最后，这里提供一些示例代码，演示如何在实际开发中使用文件监视器。
TypeScript 文件的自动编译
在开发 TypeScript 项目时，经常需要将 TypeScript 文件编译成 JavaScript 文件。我们可以使用以下代码来实现自动编译：
-- -------------------- ---- -------
------ - ----- - ---- -------
-- -- ---------- -----
----- ------- - --------------------- - ---------- ---- ---
-- --------
--- ----- ------ ----- -- -------- -
-- ----------- --- -------- -- ------------------ -- ------------------- -
-- ----- ---------- ----- --- ------
----- ---------- - ------------ ------ ------------------ --------------------
----- --------------------
-
-在上面的代码中，我们使用 spawn 方法创建了一个子进程，执行 tsc 命令将 TypeScript 文件编译成 JavaScript 文件。由于编译可能会失败，我们使用 --noEmitOnError 选项确保编译失败时不生成任何输出。可以根据实际情况修改命令行参数。任何其他类型的文件变化都不会触发编译操作，因此可以避免不必要的性能损失。
Vue 文件的自动刷新
在 Vue.js 项目中，每当 Vue 文件被修改后，需要重新加载页面以查看更新。为了避免频繁手动刷新页面，我们可以使用以下代码实现自动刷新：
-- -------------------- ---- -------
-- ---- --- ---------------
----- ------- - --------------------- - ---------- ---- ---
-- --------
--- ----- ------ ----- -- -------- -
-- ----------- --- -------- -- ------------------ -- -------------------- -
-- --------------------
----- --- --------------- -- ------------------- ------
-- ----
-------------------------
-
-在上面的代码中，我们首先使用 endsWith 方法判断事件中是否包含 .vue 后缀的文件，然后等待 500 毫秒，以确保编辑器完成保存操作，最后重新加载页面。
总结
文件监视器是一个非常有用的工具，在前端开发中有广泛的应用。在 Deno 中，我们可以使用 Deno.watchFs 方法轻松创建文件监视器，并通过设置不同的选项来满足不同的需求。希望本文能够帮助您加深对 Deno 文件监视器的理解，并实现更加高效的前端开发。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/65b1c530add4f0e0ffaf8982