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