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

在使用webpackconfigurationweb应用程序以创build最佳开发体验方面,我还是很新的。 我已经采取了两个不同的节点反应课程; 一个是我们使用nodemon来跟踪更改,另一个是我们实现热重载的地方。

当涉及到这两个依赖关系时,它是一个还是那个? 它们应该一起使用还是多余?

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

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

多谢你们。

除了花哨的术语外,他们基本上也是在做同样的事情 – “对本地编辑(文件系统更改)保持警惕,并为您更新应用程序”,因此它们都是开发工具,旨在促进/加快你的开发过程(不适用于生产)

Nodemon负责你的服务器端(Express),而Webpack(监视模式)在客户端(React)。

没有太多的魔力,当文件更改时,Nodemon只是重新启动/重新加载Express服务器,否则您需要手动终止并重新启动。

但是,Webpack(启用监视模式,通常在开发周期中)稍微复杂一点,它会监视客户端代码的变化,但是在

  1. 热模块更换 – 重新编译更改模块而不完全重新加载
  2. webpack-dev-middleware – 通过连接的服务器提供结果

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

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

尽pipe实时重新加载很酷,但由于页面的硬刷新导致应用程序失去了所有的客户端状态(例如,打破了许多开发工具,例如redux开发工具), react-hot-loader在这种情况下来拯救。

一般来说,根据您的Express + React应用程序,我将设置Nodemon for Express。 对于React,如果您希望独立的开发者服务器可以开箱即用,请selectwebpack-dev-server + react-hot-loader ,或者您希望在现有Express服务器上集成开发服务器并进行一些定制,请使用webpack-dev-middleware + react-hot-loader代替。 (无论如何HMR需要被添加为webpack插件)