使用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

---

安装

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