使用webpack-dev-server创建mock server

项目地址: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

使用webpack-dev-server创建mock server


安装

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

相关推荐