使用 Golang、Templ 和 HTMX 进行浏览器热重载

Question

当我在 go 或模板中保存新更改时，如何让浏览器自动刷新？我用 WGO 让服务器刷新，但客户端（浏览器）不刷新，这使得开发很麻烦。

由于我在客户端使用 HTMX，我相信我可以使用它来强制刷新，但如果没有超级 hacky 解决方案，这似乎不可行

Answer 1

经过一番研究，我发现了 browser-sync npm 包，它可以代理暴露的端口，并且可以在代码更改时执行刷新。

要执行刷新，您必须查找 Go 和 Templ 文件上的更改，并忽略“*_templ.go”文件上的更改（这可能会导致在 Templ 生成文件时多次重新加载）。这也必须在服务器刷新后进行，我正在使用 WGO 包。

这是一个示例 bash 脚本实现，用于执行所有必要的刷新：

# /bin/bash

wgo -file=.go -file=.templ -xfile=_templ.go templ generate :: go run main.go & \
yarn browser-sync start \
  --files './**/*.go, ./**/*.templ' \
  --ignore '*_templ.go' \
  --port 3001 \
  --proxy 'localhost:3000' \
  --middleware 'function(req, res, next) { \
    res.setHeader("Cache-Control", "no-cache, no-store, must-revalidate"); \
    return next(); \
  }'

实施存储库示例