使用webpackdevserver创建mock-server

jiezi

5 年前

项目地址：https://github.com/yuanyuansh…

在开发基于 api 交互、前后端分离的网页应用时，经常会遇到几个问题：

前端页面已经编排好了，但是后台接口还没准备好
我们希望服务器返回特定类型的数据，以测试某页面在特定条件下是否存在问题，但作为前端我们一般不会接触到后端代码和数据库，每次都找后端添加模拟数据又很麻烦。

为解决这两个问题，最简单的解决办法就是搭建一个 mock server，专门返回需要的模拟数据。

webpack-dev-server 是我们开发 vue、react 时必备的工具，既然是一个服务器，那么我们是不是可以让他实现一个 mock server 的功能。

原理：通过 webpack-dev-server 的 before 钩子，可以在 webpack-dev-server 上添加我们需要的 mock server 功能，而不需要另行搭建服务器。

只需要少许修改就能 webpack-dev-server 当做 mock server 来用，并且对同一 URL 下的 GET、POST、PATCH 等不同的 HTTP METHOD 做分别处理，支持热切换。

使用方法很简单，在 webpack.dev.conf.js 的 devServer 中添加新钩子 before，将所有请求交由 apiMocker 处理，然后当需要使用模拟数据时，只需要将请求的 URL 改为 webpack 服务器上既可。项目地址 webpack_api_mocker

npm install mocker-api --save-dev

package.json 中配置

"dev-mock": "cross-env MOCK=true webpack-dev-server --inline --progress --config build/webpack.dev.conf.js"

webpack.dev.conf.js 中配置

   devServer: {before (app) {if (process.env.MOCK) {apiMocker(app, path.resolve('mock/mocker'), {
                   proxy: apiDomainMap,
                   changeHost: true
               })
           }
       }
   }

apiDomainMap.js 配置

let urls = {'https://api.github.com': ['/search/repositories*', '/use/repositories*']
}

mocker.js 配置

const proxy = {'GET /api/user': { id: 1, username: 'kenny', sex: 60},
   'GET /api/user/list': [{ id: 1, username: 'kenny', sex: 6},
       {id: 2, username: 'kenny', sex: 6}
   ],
   'GET /api/common/list': [{ id: 1, console: '光远接口啥时候好'},
       {id: 2, console: '光远接口好了么'},
       {id: 2, console: '赛迪工单能通'},
       {id: 2, console: '赛迪工单能调么'}
   ]
}
module.exports = proxy

安装

使用