Fastify框架下是否有保存代码自动刷新浏览器的类似livereload方案？

Fastify 生态有现成的工具可以实现该需求，不需要完全自行编写插件，也可以根据现有开发流程选择适配方案：

方案1：使用专用插件 fastify-livereload #

该插件的实现逻辑与 Express 中的 livereload 中间件一致，会自动向服务返回的 HTML 响应中注入 livereload 客户端脚本，监听指定目录的代码变更后主动触发浏览器刷新。
操作步骤：

• 安装开发依赖：npm install fastify-livereload --save-dev
• 仅在开发环境注册插件即可，示例代码：

const fastify = require('fastify')()

if (process.env.NODE_ENV === 'development') {
  fastify.register(require('fastify-livereload'), {
    // 自定义监听目录、排除规则、端口等参数
    watch: ['./src'],
    port: 35729
  })
}

// 后续注册路由、启动服务的逻辑保持不变

启动服务后，修改src目录下的代码并保存，浏览器就会自动刷新。

方案2：搭配现有进程重启工具实现 #

如果你的开发流程已经在使用nodemon、ts-node-dev这类工具监听后端代码变更、自动重启 Node 进程，也可以直接复用 Express 的 livereload 相关中间件实现：

• 安装依赖：npm install livereload connect-livereload @fastify/middie --save-dev
• 注册兼容中间件即可，示例代码：

const fastify = require('fastify')()

if (process.env.NODE_ENV === 'development') {
  // 注册 Express 中间件兼容层
  await fastify.register(require('@fastify/middie'))
  // 注入 livereload 客户端脚本到HTML响应
  fastify.use(require('connect-livereload')())
  // 启动 livereload 监听服务
  require('livereload').createServer({
    watch: ['./src']
  }).watch()
}

注意：如果你的 Fastify 服务是纯 API 接口服务，没有返回前端 HTML 内容，上述自动刷新浏览器的方案不会生效，需要搭配前端项目自身的热更新能力实现页面刷新

内容的提问来源于stack exchange，提问作者Stacky