轻量级前端 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