javascript - 通过自定义 Express 服务器为 React 应用程序提供服务，同时在开发过程中保持自动更新

Question

我有一个 React 应用程序和一个单独的Express 服务器应用程序。

通过在我的 Express 应用程序中使用以下代码，我可以使用自定义 express 服务器为我的 React 应用程序提供服务：

app.get("*", (req, res) => {
  res.sendFile(path.join(__dirname + "/frontend/build/index.html"));
});

这很好用，但是这样做我失去了 React 在我进行更改时自动更新我的应用程序的能力。这是因为我是index.html从我的 React 构建文件夹加载的。因此，要查看我所做的任何更改，我必须停止 Express 应用程序，重建我的 React 应用程序并重新启动 Express 应用程序。

有什么办法可以修改上面的代码或做其他事情来确保 React 应用程序在开发环境的浏览器中保持自动更新？

我的 npm 脚本如下所示：

npm run build --prefix frontend && node server.js

./是一个 Node 应用程序，它是我的 Express 服务器

./frontend是一个单独的 Node 应用程序，其中包含我的 React 应用程序

谢谢！

标签： javascriptnode.jsreactjsexpress

Answer 1

我有一个 React 应用程序

如果您可以访问它的源文件，那么您可能正在使用 Webpack 至少将单独的组件文件捆绑在一起（更不用说使用插件和加载器，例如，用于 JSX 的 Babel）。

如果是这样，使用webpack-dev-server将是最好的选择，因为它是这类任务的解决方案。请记住，这不是服务器配置，而是客户端配置（尽管仅限开发人员）。有关其他类似选项，请参阅Webpack 的“选择开发工具”部分。

---

如果任务是以某种方式使这种重新加载从服务器发生（它不应该，因为它是开发，但我可能会错过一些东西），当然，看看webpack-dev-middleware. 如果这不起作用，恐怕解决方案可能很复杂，包括为文件组设置观察者、建立客户端到服务器的通信（例如 WebSockets）以及触发整页或部分页面重新加载。