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

---