firebase 本地服务器 > 文件更改时如何刷新浏览器

Posted 2023-02-22

【中文标题】firebase 本地服务器 > 文件更改时如何刷新浏览器

【英文标题】：firebase local server > how to refresh browser when files changed

【发布时间】：2017-11-30 09:11:00

【问题描述】：

我正在本地 firebase 服务器（以“firebase serve”开头）上运行 web 应用程序。

我想要找到一种方法告诉我的客户（浏览器脚本）我的项目文件已更改，以便启动浏览器刷新。

在 以前的项目（运行 nodejs 服务器）中，我的解决方案是在后端之间建立 websocket 连接和前端。所以每次重新启动服务器时（...由于文件更改，我一直在监视使用 nodemon 之类的监视程序...），我的服务器端代码 与客户端建立一个新连接，该客户端侦听该事件并刷新浏览器。

我的 firebase 服务器的问题是，我不运行自己的后端代码并且我没有找到任何有关如何告诉我的客户我的项目文件已更改的信息。 事实上，我的 firebase 服务器根本不会重新启动，因为在这个 无后端环境 中还不需要重新启动。但我想至少这可以通过 nodemon 或其他方式运行我的 firebase 服务器来完成。

附加信息：我试图找到一种使用 webpack-dev-server 的方法，它集成了自动刷新功能，但找不到两个服务器之间的链接或将它们集成在不同端口上运行并解决不同任务的方法.

我的问题可能是：firebase 服务器中是否实施了任何解决方案？有没有办法在文件更改时触发客户端事件？或者最终运行我自己的 firebase 后端中间件来创建与客户端的 websocket 连接？

欢迎提出任何建议。

---

编辑：

我找到了一种使用 browsersync 的方法。由于 browsersync 可以充当其他服务器的代理（在我的例子中：firebase 服务器），因此设置起来非常容易。

安装后进入你的项目目录并输入例如：

浏览器同步开始 --proxy "localhost:5000" --files "dist/*"

其中“localhost:5000”是您当前服务器地址的主机和端口，“dist”是应该监视更改的目录。

每个默认 browsersync 将在“localhost:3000”为您的应用程序提供服务。

更多信息browsersync homepage

【问题讨论】：

这在您的编辑中似乎是一个不错的选择，但这种方法存在一个问题，即只有当您的应用程序是静态托管站点时它才会好。我可以在这里寻找具有功能和角度应用程序的项目：两者都在打字稿中，并且需要在服务器使用之前进行构建。现在我可以将函数设置为使用 tsc -w 自动构建，但现在确定如何在更改时自动构建 Angular 应用程序。

@AnantAnandGupta Angular 已实时重新加载。所以不需要 browserSync 与 Angular 或使用 Firebase 的 Angular 项目。使用 ng serve 而不是 firebase serve 将重新加载必要的更改

【参考方案1】：

当您重新加载网页时，Firebase CLI 工具会提供本地磁盘中的最新文件。

当您修改磁盘上的本地文件时，Firebase CLI 工具不会在浏览器中自动重新加载该文件。 Firebase CLI 对其提供的内容知之甚少，目前绝对无法实现此功能。

如果您希望添加此功能，我建议您将其添加为feature request on the firebase-tools repo。

【讨论】：

谢谢。你让我走向了正确的方向。正如您所指出的，firebase 主要对应用程序的后端“感兴趣”。因此，前端任务可能由其他软件更好地解决。虽然如果firebase服务器有这样的功能会很好

仍然没有关于热重载的消息？

我想我最终使用了自己的 nodejs 脚本，使用了像 chokidar 或 fs.watch 这样的文件观察器。但不知道这些天最好的方式。