使用 Node-React Web 应用程序进行 Nodemon 和/或热重载

Question

在使用 webpack 配置 Web 应用程序以创建最佳开发体验时，我还是个新手。我参加了两门不同的 Node-React 课程：一门我们使用 nodemon 来跟踪更改，另一门我们实现了热重载。

当谈到这两个依赖时，是一个还是另一个？它们应该一起使用，还是有点多余？

另外，如果我在客户端使用带有 React 的 express 服务器，我是使用 react-hot-loader、webpack-hot-middleware 还是两者都使用？我对采用哪种方法进行热重载感到困惑，因为似乎有很多方法可以做到这一点。

此外，当我使用 nodemon 作为包装器 (nodemon --exec babel-node server.js) 时，我的热模块重新加载不起作用，但我仍然发现自己需要一种轻松重启服务器的方法。

谢谢。

Answer 1

去糖化花哨的术语，它们基本上在做同样的事情 - “密切关注（观察）您的本地编辑（文件系统更改）并为您更新应用程序”，因此它们都是开发工具旨在促进/加速您的开发过程。（不适用于生产）

Nodemon 负责您的服务器端（Express），而 Webpack（监视模式）负责客户端（React）。

无需太多魔法，Nodemon 只需在文件更改时重新启动/重新加载您的 express 服务器，否则您需要手动终止并重新启动。

但是，Webpack（启用了监视模式，通常在开发周期中）有点复杂，它监视您的客户端代码更改，但在

的帮助下

1. hot-module-replacement - 重新编译更改的模块，无需完全重新加载
2. webpack-dev-middleware - 通过连接的服务器提供结果

重新编译过程非常快，可以通过以下任一方式从本地开发服务器提供服务：

• webpack-dev-server 提供更改的模块和实时重新加载（连接到浏览器并硬刷新页面）
• webpack-dev-middleware + Express/Koa 服务器，可以做同样的事情，但你可以获得更多的控制权，比如提供静态文件或创建一些 api 路由。

尽管实时重新加载很酷，但由于页面的硬刷新会导致应用丢失所有客户端状态（破坏许多开发工具，例如 redux 开发工具），react-hot-loader 在这种情况下可以救援。

一般来说，根据您的 Express + React 应用程序，我会为 Express 设置 Nodemon。对于 React，如果您想要一个开箱即用的独立开发服务器，请选择 webpack-dev-server + react-hot-loader，或者您想要在现有 Express 服务器之上集成开发服务器并进行一些自定义，请使用 webpack-dev-middleware + @ 987654331@ 代替。 （HMR 无论如何都需要添加为 webpack 插件）