使用Node-React Web App进行Nodemon和/或热重载 [英] Nodemon and/or Hot Reloading with a Node-React Web App

问题描述

在使用webpack配置Web应用程序以创建最佳开发体验时，我还是很新的.我参加了两个不同的Node-React课程；一处是使用nodemon跟踪更改的地方，另一处是实现热重装的地方.

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

此外，如果我在客户端使用带有React的Express服务器，是否使用react-hot-loader，webpack-hot-middleware或同时使用两者?我对采用哪种方法进行热重装感到困惑，因为似乎有很多方法可以做到这一点.

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

谢谢大家.

解决方案

去掉那些花哨的术语，他们基本上是在做同样的事情-注意(注意)您的本地编辑(文件系统更改)，以及为您更新应用程序"，因此它们都是旨在促进/加快您的开发过程的开发工具.(不用于生产)

Nodemon负责服务器端(Express)，而Webpack(监视模式)则位于客户端(React).

Nodemon不需要太多魔力，只需在文件更改时重新启动/重新加载快速服务器，否则您就需要终止&手动重启.

但是，Webpack(启用了监视模式，通常在开发周期中)要复杂一些，它监视客户端代码的更改，但是借助

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

重新编译过程非常快，并且可以通过以下任一方式从本地开发服务器中进行服务:

• webpack-dev-server 提供已更改的模块并实时重新加载(连接到浏览器并硬刷新页面)
• webpack-dev-middleware + Express/Koa服务器可以执行相同操作，但您将获得更多控制权，例如提供静态文件或创建一些api路由.

即使实时重装很酷，由于页面的硬刷新也会导致应用失去所有客户端状态(破坏许多开发工具，例如redux开发工具)， 解决方案

De-sugar the fancy terminologies, they're basically doing the same thing - "keep an eye (watch) on your local edits (file system changes) and updates the app for you", thus they're all dev tools intended to facilitate/speedup your dev process.(NOT for production)

Nodemon is in charge of your server-side (Express) while Webpack (watch mode) on the client-side (React).

Without too much magic, Nodemon simply restarts/reloads your express server when file changes, otherwise you need to kill & restart manually.

However, Webpack (with watch mode enabled, typically in a dev cycle) is a bit more complex, it watches your client side code change, but with the help of

1. hot-module-replacement - recompile changed module without full reload
2. webpack-dev-middleware - serve the results through connected server

The recompiling process are pretty fast and can be served from a local dev server by either:

• webpack-dev-server serving changed modules and live reloading (connect to browser and hard refresh the page)
• webpack-dev-middleware + Express/Koa server, can do the same but you get more control like serving static files or creating some api routes.

Even though live reloading is cool, since hard refresh of the page causes app to lose all client side state (break many dev tools, redux dev tool e.g), react-hot-loader comes to rescue in this case.

In general, based on your Express + React app, i would set up Nodemon for Express. For React, if you want a standalone dev server works out of box, choose webpack-dev-server + react-hot-loader, or you want an integration of dev server on top of your existing Express server and a bit customization, use webpack-dev-middleware + react-hot-loader instead. (HMR needs to be added as webpack plugin anyway)

这篇关于使用Node-React Web App进行Nodemon和/或热重载的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！