前言
Deno 是一个新兴的 JavaScript 和 TypeScript 运行时环境，由 Node.js 的原作者 Ryan Dahl 所开发。相比于 Node.js，Deno 具有更高的安全性、更好的开发体验和更好的性能，因此越来越受到前端开发者的关注和喜爱。
热重载是前端开发中非常重要的一个功能，它可以在代码修改后自动重新加载页面，从而提高开发效率。本文将介绍如何使用 Deno 实现热重载，并提供详细的代码示例和指导意义。
实现热重载的原理
实现热重载的原理可以分为两步：
- 监听代码文件的变化；
- 在代码文件发生变化时重新加载页面。
在 Node.js 中，我们通常使用 nodemon 这个工具来实现热重载，它可以监听代码文件的变化并自动重启 Node.js 服务器。但是在 Deno 中，由于没有全局安装模块的概念，我们需要通过编写代码来实现热重载。
实现热重载的代码示例
下面是一个使用 Deno 实现热重载的代码示例：
// www.javascriptcn.com code example
import { serve } from "https://deno.land/std/http/server.ts";
import { watch } from "https://deno.land/std/fs/mod.ts";
const PORT = 8000;
const server = serve({ port: PORT });
console.log(`Server running at http://localhost:${PORT}`);
let reload = false;
watch(".", { recursive: true }, () => {
console.log("File changed, reloading...");
reload = true;
});
for await (const req of server) {
if (reload) {
req.respond({ body: "Reloading..." });
const process = Deno.run({
cmd: ["deno", "run", "--allow-net", "server.ts"],
stdout: "piped",
});
const { code } = await process.status();
console.log(`Server exited with code ${code}`);
reload = false;
} else {
req.respond({ body: "Hello, Deno!" });
}
}这段代码首先启动一个 HTTP 服务器，并监听指定的端口。然后使用 Deno 的 watch 函数来监听当前目录下的所有文件的变化。当有文件发生变化时，将 reload 变量设为 true。
在 HTTP 服务器的主循环中，如果 reload 变量为 true，则表示需要重新加载页面，此时会启动一个新的 Deno 进程来运行服务器代码，并将 reload 变量设为 false。否则，就正常响应请求。
运行代码
要运行这段代码，需要先安装 Deno：
$ curl -fsSL https://deno.land/x/install/install.sh | sh
然后把代码保存为 server.ts，并在命令行中执行：
$ deno run --allow-net server.ts
此时，服务器就会在本地的 8000 端口启动，并监听文件变化。你可以在浏览器中访问 http://localhost:8000，看到服务器返回的内容。
如果你修改了代码文件，服务器就会自动重启，并重新加载页面。在命令行中可以看到类似下面的输出：
File changed, reloading... Server exited with code 0 Server running at http://localhost:8000
指导意义
本文介绍了如何使用 Deno 实现热重载，并提供了详细的代码示例。通过学习这个示例，你可以了解到：
- 如何使用 Deno 的
watch函数监听文件变化； - 如何启动一个新的 Deno 进程来重新运行服务器代码；
- 如何使用
for await循环来处理 HTTP 请求。
这些知识都非常有用，可以帮助你更好地理解和使用 Deno。同时，热重载也是前端开发中非常重要的一个功能，它可以提高开发效率，减少不必要的重复工作。因此，学习如何实现热重载也是非常有意义的。
Source: FunTeaLearn,Please indicate the source for reprints https://funteas.com/post/67d56c07a941bf7134a1c9c2