
react 将express配置到react项目路径下启动,并配置为自动更新(热加载),并配置同时启动react项目以及express服务
当然,如果你觉得文章有什么让你觉得不合理、或者有更简单的实现方法又或者有理解不来的地方,希望你在看到之后能够在评论里指出来,我会在看到之后尽快的回复你。至此配置热加载完成,以下为一条命令同时启动react项目以及express服务。express 默认是没有热加载的,每次更改接口都需要重新启动,不然不生效。,须根据自己项目express服务文件夹名称进行改写。express的服务启动命令为:npm
前言
本文基于 (“react”: “^16.13.1”) 版本
1.参考 express 下的 package.json 文件
express的服务启动命令为:npm start
2.打开 react 项目的 package.json 文件,进行改写,增加 server 命令
路径为 express项目名 /bin/www,须根据自己项目express服务文件夹名称进行改写
"server": "node server/bin/www",
3.在react项目路径的基础上,启动express服务
npm run server
出现如下
4.express实现自动刷新 (热加载)
express 默认是没有热加载的,每次更改接口都需要重新启动,不然不生效
使用 nodemon 实现 express 热加载。
npm install nodemon --save
5.改写 package.json (注意是react项目的package.json)
node 更改成 nodemon
"server": "nodemon server/bin/www",
6.启动 npm run server
npm run server
至此配置热加载完成,以下为一条命令同时启动react项目以及express服务
7.使用 concurrently (一条命令同时启动react项目以及express服务)
npm install concurrently --save
还是修改react项目的package.json,增加 dev 命令
"dev": "concurrently \"npm start\" \"npm run server\"",
8. 使用 dev 命令同时启动react项目以及express服务端
npm run dev
启动成功
如果本篇文章对你有帮助的话,很高兴能够帮助上你。
当然,如果你觉得文章有什么让你觉得不合理、或者有更简单的实现方法又或者有理解不来的地方,希望你在看到之后能够在评论里指出来,我会在看到之后尽快的回复你。
更多推荐
所有评论(0)