Browsersync使用http-proxy-middleware转发请求到mock服务器
2021/3/1 14:40:32
本文主要是介绍Browsersync使用http-proxy-middleware转发请求到mock服务器,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!
背景
最近对项目里的老代码进行了一些优化和整改,其中一个便是对mock的优化。
老代码
方案
将mock代码先使用babel从es6编译为es5,再自己写了一个中间件mockApiMiddleware(实际就是一个方法接收处理reques,response,next),根据request从mock中获取到数据再response给前端。
browsersync示例:
const webpackDevMiddleware = require('webpack-dev-middleware') const webpackHotMiddleware = require('webpack-hot-middleware') module.exports = function() { ... middleware: [ mockApiMiddleware(), // 自定义mock服务中间件 webpackDevMiddleware(params), // webpack中间件,params是webapck编译后相关路径等参数 webpackHotMiddleware(params), ] }
弊端
- 当mock的代码改变后,需要重启(即重新babel编译原来的mock)才能刷新mock数据。
- mock中若依赖项目代码的一些常量等文件,babel还需要增加引用了的项目代码的编译,否则会报错(不支持项目的es6代码)。
新代码
方案
为了解决如上问题,决定将架构修改为:
- 解决弊端2 ==> 使用node server作为mock的服务器,和browsersync不共用服务端口,新的mock server使用4000端口(browsersync使用8080)。
- 解决弊端1 ==> 使用nodemon监听到文件修改自动重启mock服务。
- 由于现在mock服务和browsersync不在同一个端口启动,前端通过browsersync启动后发送的mock请求依旧是请求8080端口,因此新增http-proxy-middleware进行转发,将8080端口(原请求)的请求转发到4000端口(mock服务端口)。
- 根据上述方案,发现如果这样设计我们需要同时启用2个cmd窗口,为了开发方便,我们想要一条命令npm start即可。concurrently 和 npm-run-all可以解决这个问题,不需要开新的cmd窗口并行执行多条cmd命令。
实现
新建mock server
新建node服务器时,使用express、koa等能减少很多工作。由于在本次项目中,原来的mockApiMiddleware代码是可以复用的,因此简单使用node新建服务即可。
// createProxyMiddleware没有传递next,这里只是为了兼容老代码 const next = () => { info(`can not find in mock data.`) } // 获取mock数据的业务代码 const mockApiMiddleware = function (req, res) { info(`Request Method-> ${req.method}, URL -> ${req.url}`) const mockArray = mocker.getMocks() if (req.method.toUpperCase() === 'GET') { handleGetRequest(req, res, next, mockArray) } else if (req.method.toUpperCase() === 'POST' || req.method.toUpperCase() === 'PUT') { handlePostRequest(req, res, next, mockArray) } else if (req.method.toUpperCase() === 'PATCH') { handlePatchRequest(req, res, next, mockArray) } } const server = http.createServer((req, res) => { mockApiMiddleware(req, res) }) server.listen(4000) info(`mock server start on port 4000. \r\n\r\n`)
nodemon启动mock
在package.json的scripts中新增如下配置,npm run mock启动服务后,watch的文件改变时,自动重启。
-w 配置监听的文件,监听多个文件时用多个-w表示。 ./mock/server.js 是启动服务的文件 --exec配置为使用babel-node运行(es6文件可以直接执行,不用babel预编译)
"mock": "nodemon --legacy-watch -w ./mock -w [other watch files] ./mock/server.js --exec babel-node"
browsersync示例
http-proxy-middleware 1.0+版本中,使用createProxyMiddleware方法新建转发中间件。
const webpackDevMiddleware = require('webpack-dev-middleware') const webpackHotMiddleware = require('webpack-hot-middleware') const { createProxyMiddleware } = require('http-proxy-middleware') module.exports = function() { ... middleware: [ webpackDevMiddleware(params), // webpack中间件,params是webapck编译后相关路径等参数 webpackHotMiddleware(params), createProxyMiddleware('/api/v1', { // 路径匹配 target: 'http://localhost:4000', // 要转发的目标地址 changeOrigin: true, // for vhosted sites, changes host header to match to target's host }), ] }
npm run同时执行多个
concurrently 和 npm-run-all同样有用,项目中已经有npm-run-all,因此选择了它。
--parallel参数表示并发执行
gulp-dev可以是任何启动前端的命令
"start":"npm-run-all --parallel mock gulp-dev"
结果
现在只需要运行npm run start,就可以同时启动2个服务啦,并且mock数据修改后立马生效,再也不用重启了。
这篇关于Browsersync使用http-proxy-middleware转发请求到mock服务器的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!
- 2024-05-30毕设私活神器
- 2024-05-30html
- 2024-05-09一定要避坑:关于微信H5分享,温馨提示你不要再踩坑了!!!
- 2024-05-09本地项目放到公网访问!炒鸡煎蛋!
- 2024-04-07金融企业区域集中库的设计构想和测试验证
- 2024-03-11前端CSS的工程化——掌握Sass这四大特性就够了
- 2024-02-21h5关联css样式(html怎么和css关联)-icode9专业技术文章分享
- 2024-02-07Firefox禁止远程字体加速网页加载及图标字体补充安装
- 2024-02-07一个菜鸡前端的3年总结-「2023」
- 2024-01-18最火前端Web组态软件(可视化)