在使用Webpack配置Web应用以创建最佳开发体验方面,我还是个新手。我参加了两门不同的Node-React课程:一个是使用nodemon跟踪更改,另一个是实现热重载。
当谈到这两个依赖项时,是一个还是另一个?它们应该一起使用,还是有点多余?
另外,如果我在客户端使用带有React的Express服务器,我是使用react-hot-loader,webpack-hot-middleware,还是两者都用?我对热重载的方法感到困惑,因为似乎有很多方法可以做到这一点。
此外,当我使用nodemon作为 Package 器(nodemon--exec babel-node server.js)时,我的热模块重载不起作用,但我仍然发现自己需要一种方法来轻松地重新启动服务器。
谢谢你。
2条答案
按热度按时间jobtbby31#
去掉这些花哨的术语,它们基本上都是在做同样的事情--“关注(监视)你的本地编辑(文件系统更改)并为你更新应用程序”,因此它们都是旨在促进/加速你的开发过程的开发工具。(不适用于生产)
Nodemon
负责服务器端(Express),而Webpack(监视模式)负责客户端(React)。没有太多的魔法,Nodemon只需在文件更改时重新启动/重新加载您的Express服务器,否则您需要手动杀死&重新启动。
然而,Webpack(启用了监视模式,通常在开发周期中)稍微复杂一些,它监视客户端代码更改,但需要
重新编译过程非常快,可以通过以下任一方式从本地开发服务器提供:
尽管实时重载很酷,但由于页面的硬刷新会导致应用程序丢失所有客户端状态(破坏许多开发工具,例如redux开发工具),react-hot-loader在这种情况下起到了拯救作用。
一般来说,基于你的Express + React应用,我会为Express设置
Nodemon
。对于React,如果你想要一个独立的开发服务器开箱即用,请选择webpack-dev-server
+react-hot-loader
,或者你想要在现有Express服务器上集成开发服务器并进行一些定制,使用webpack-dev-middleware
+react-hot-loader
代替。(无论如何,HMR需要作为webpack插件添加)fnvucqvd2#
在使用nodemon:::进行更改后重新启动react服务器时可能有用(速度有点慢)
安装nodemon后安装kill-port:
并在package.json中编辑此部件
然后在终端输入
nodemon
开始React。希望它有用