最近在使用Mockjs作为项目里面mock数据的工具，发现mockjs做的拦截部分是自己实现摸拟了一个XMLHttpRequest的方法做的拦截，使用Mockjs拦截请求后，在chrome的network上无法看到请求(具体mockjs使用方法可以查看他的api，mockjs-api这里我不多做阐述),但为了更加真实的像后台返回数据，我自己使用Node作为中间代理去实现了一个mock-plugin.
express中间件介绍
因为插件相当于是实现了一个express的中间件的方式，所以这里简单对express中间件的使用做一个说明：
express中间件通过app.use(也有app.get,app.post等方法)的方式注册到express的实例某个属性上，将执行函数存放在栈内部，然后在回调执行的时候调用next()方法将执行下一个存在栈内的方法。
这里列举一个示例：
const express = require('express'); const app = express(); app.use(function (req, res, next) { console.log('first all use'); next() }); app.use(function (req, res, next){ setTimeout(() => { console.log(`two all use`) next() }, 1000) }); app.use(function (req, res, next) { console.log('end all use') next() }); app.use('https://www.jb51.net/', function (req, res, next) { res.end('hello use') }); app.listen(4000, function () { console.log(`起动服务成功！`) });
通过node执行以上代码后，在浏览器上通过访问:4000可以看到控制台打印：
可以发现在执行的时候先执行了use注册的中间件，然后再执行到get路由的时候，又执行了app.use注册的中间件。
详细的express中间件可以在express官网查看
实现dev-server
devServer可以使用webpack-dev-server然后通过before的回调去做一层拦截，这样也能够实现在响应之前对后台的数据做一些处理。
我这儿选择自己实现一个devServer,在之前使用webpack-dev-server的服务大概需要配置，port, proxy,以及跨域https等。当然自己实现devServer就没必要实现那么多功能了，正常在开发场景下很多也不一定用得上，这里我主要使用了webpack-dev-middleware和webpack-hot-middleware达到自动编译和热更新的目的,以及可以自己在中间添加express中间件.
贴上代码：
onst path = require('path'); const express = require('express'); const webpack = require('webpack'); const webpackConfig = require('./webpack.dev'); const devMiddleware = require('webpack-dev-middleware'); const hotMiddleware = require('webpack-hot-middleware'); const app = express(); const compiler = webpack(webpackConfig); // webpack开发环境配置 const mockPlugin = require('./mock-plugin'); const config = { prd: 8800 }; // 注册webpack-dev-middleware中间件 app.use( devMiddleware(compiler, { publicPath: webpackConfig.output.publicPath }) ); // 注册webpack-hot-middleware中间件 app.use( hotMiddleware(compiler) ); // 注册mockPlugin插件 app.use( mockPlugin({ routes: { '/app': 'http://locahost:3002', // 测试代理到服务器的地址 '/api': 'http://localhost:3003' // 测试代理到服务器的地址 }, root: path.resolve(__dirname) // 项目根目录 }) ); app.listen(config.prd, function () { console.log('访问地址：', `:${config.prd}`); });
具体的一些演示操作，这里也不多讲了（这不是实现mock-plugin的重点），网上也有很多如果通过webpack-dev-middleware和webpack-hot-middleware的教程，唯一的区别是代理部分，网上可能用的是http-proxy之类已现有的工具，因为我们这儿需要在请求代理中间还需要处理一层，所以这儿我们自己实现mockPlugin注册进去。
摸拟mock文件
因为mock工具包含了一个请求后台的结果自动写入到Mock目录下。所以这里将目录层级设置为与请求路径保持一致：
api接口：/app/home/baseInfo => 目录：mock\app\home\baseInfo.js
对应 baseInfo.js 模板:
// mock 开关 exports.check = function () { return true; } // mock 数据 exports.mockData = function () { return { "success": true, "errorMsg": "", "data": { name: 'test' } } }
当check为true时对就请求将会取mockData的数据。
主逻辑实现
mock-plugin主要暴露一个高阶函数，第一层为请求代理配置，返回的函数的参数与app.get('https://www.jb51.net/')的回调参数一致，不描述细节，大概输出主要的逻辑。