使用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

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

Nodemon 在客户端(React)的Webpack(监视模式)下负责服务器端(Express).

没有太大的魔力,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应用程序,我会设置NodemonExpress.对于React,如果您希望独立开发服务器开箱即用,请选择webpack-dev-server+ react-hot-loader,或者您希望将dev服务器集成到现有Express服务器之上并进行一些自定义,请使用webpack-dev-middleware+ react-hot-loader.(无论如何,HMR需要添加为webpack插件)