使用Node-React Web App进行Nodemon和/或热重新加载

Question

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

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

另外，如果我在客户端使用带有React的快速服务器，我是否使用react-hot-loader，webpack-hot-middleware或两者兼而有之？我对使用热重新加载采用哪种方法感到困惑，因为看起来有很多方法可以做到这一点。

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

谢谢你们。

Answer 1

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

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

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

然而，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，或者您希望将dev服务器集成到现有Express服务器之上并进行一些自定义，请使用{ {1}} + webpack-dev-middleware代替。 （无论如何，HMR需要添加为webpack插件）