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

Question

在使用 webpack 配置 Web 应用程序以创建最佳开发体验方面，我仍然很陌生。 我参加了两门不同的 Node-React 课程：一门我们使用 nodemon 来跟踪更改，另一门我们实现热重载。

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

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

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

谢谢你。

Answer 1

除了花哨的术语，他们基本上做同样的事情 - “留意（观察）你的本地编辑（文件系统更改）并为你更新应用程序”，因此他们都是旨在促进的开发工具/加速你的开发过程。（不用于生产）

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

没有太大的魔力，Nodemon只需在文件更改时重新启动/重新加载您的快速服务器，否则您需要手动终止并重新启动。

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

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

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

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

即使实时重新加载很酷，因为页面的硬刷新导致应用程序失去所有客户端状态（打破许多开发工具，例如redux dev工具），在这种情况下， react-hot-loader开始拯救。

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

Answer 2

可能有用（慢一点）在用 nodemon 更改后重新启动反应服务器：：

安装 nodemon 安装 kill-port 后：

 npm install kill-port

并在 package.json 中编辑这部分

 "start": "kill-port 3000 && react-scripts start",

然后开始反应，只需在终端中输入nodemon 。 希望它有用