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