輕量級前端 Mock 工具

背景

你們應該都遇到過在使用 mock 數據和請求測試環境接口頻繁切換，這就須要不停更改 webpack dev server 的 proxy，而後重啓項目。對於大型項目，重啓成本仍是挺高的。全部有沒有什麼辦法不重啓就能切換請求目標呢？能不能經過在 url 上添加、移除參數來控制呢？

flex-mocker

基於以上問題，我開發了一個搭配 webpack dev server 的 Mock 工具：flex-mocker

特色

不須要重啓項目便可隨時切換請求 mock 數據仍是請求代理接口

• 默認請求本地 mock 數據

• 經過在地址欄添加 mode=online 的 search 便可請求代理（webpack proxy）接口

• Mock 文件支持熱更新，修改後當即生效

• 能夠對請求作簡單的邏輯處理

使用方法

npm install flex-mocker --save-dev
複製代碼

安裝後在項目下新建一個存放 mock 數據的文件夾

例如一個請求地址爲 api/queryCities，則在 mock 文件夾下新建 [mock folder]/api/queryCities.json

queryCities.json 文件內容：

{
  "code": "0",
  "msg": "success",
  "result": [
    { "city": "beijing", "code": 1 },
    { "city": "shanghai", "upcName": 2 }
  ],
  "success": true
}
複製代碼

若是須要對入參作一些邏輯處理則建立 js 文件：

const dict1 = [{ type: 1, value: "1" }];

const dict2 = [{ label: "name", value: "1" }];

module.exports = req => {
  // 獲取入參
  const { dataType } = req.body;
  return {
    code: "0",
    msg: "success",
    dictionaryList: dataType === 1 ? dict1 : dict2,
    success: true
  };
};
複製代碼

配置 webpack 的 devServer 使 mock 生效：

// webpack 配置文件
const mocker = require('flex-mocker')

devServer: {
  ...
  before: app => {
    mocker({
      mockDir: resolve('./mock'),
      requestPrefixes: ['/api']
    })(app)
  },
  proxy: {
   ...
  }
}
複製代碼

參數

mockDir : mock 文件夾的絕對路徑

requestPrefixes : 須要進行 mock 的請求 url 前綴

delay : 響應延遲，默認值爲 0

寫在後面

若是你們有更好的主意，歡迎提交 pr，以爲有用的話就點個 star 吧😝，傳送門：flex-mocker