乐趣区

关于前端:Browsersync使用httpproxymiddleware转发请求到mock服务器

jiezi

背景

最近对我的项目里的老代码进行了一些优化和整改，其中一个便是对 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),
]
}

弊病

  1. 当 mock 的代码扭转后，须要重启（即从新 babel 编译原来的 mock）能力刷新 mock 数据。
  2. mock 中若依赖我的项目代码的一些常量等文件，babel 还须要减少援用了的我的项目代码的编译，否则会报错（不反对我的项目的 es6 代码）。

新代码

计划

为了解决如上问题，决定将架构批改为：

  1. 解决弊病 2 ==> 应用 node server 作为 mock 的服务器，和 browsersync 不共用服务端口，新的 mock server 应用 4000 端口（browsersync 应用 8080）。
  2. 解决弊病 1 ==> 应用 nodemon 监听到文件批改主动重启 mock 服务。
  3. 因为当初 mock 服务和 browsersync 不在同一个端口启动，前端通过 browsersync 启动后发送的 mock 申请仍旧是申请 8080 端口，因而新增 http-proxy-middleware 进行转发，将 8080 端口（原申请）的申请转发到 4000 端口（mock 服务端口）。
  4. 根据上述计划，发现如果这样设计咱们须要同时启用 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 数据批改后立马失效，再也不必重启了。

退出移动版