quick-mock

安装

npm i @skimmer/quick-mock -D 或 yarn add @skimmer/quick-mock -D

使用

命令行执行 quick-mock start 即可在项目根目录生成 mock 文件夹，且包含相关的文件

start.js

• 用于启动 mock 服务
• 在 package.json 文件中添加 scripts 命令，例如：

// supervisor - 用于热部署
{
  "start:server:mock": "supervisor -w ./mock/servers -e js -p 1000 mock/start.js"
}

proxy-interceptor.js

• 用于拦截代理接口的逻辑处理
• 需要代理地址文件中使用，在 package.json 文件中添加 scripts 命令，例如：

// PROXY_INTERCEPTOR - 注入标记
{
  "start:proxy:interceptor": "cross-env PROXY_INTERCEPTOR=true craco start"
}

const proxyInterceptorHook = require("../mock/proxy-interceptor");
const { PROXY_INTERCEPTOR } = process.env;
const proxyMaps = {
  "/api": {
    target: "http://localhost:7003",
    changeOrigin: true,
    pathRewrite: {
      "^/api": ""
    }
  }
};
// 将需要劫持的代理接口包装一遍，用户保存拦截数据
const proxy =
  PROXY_INTERCEPTOR === "true" ? proxyInterceptorHook(proxyMaps) : proxyMaps;
module.exports = proxy;

proxy-interceptor-servers.json

拦截器生成的文件，用于 mock 接口

[
  {
    "data": { "code": 200, "message": "success", "data": null },
    "method": "get",
    "url": "/login"
  }
]

优点

• 直接使用命令即可快速生成接口文件
• 前端源代码无侵入

过程

• 在接口统一拦截处，成功返回后将数据全部储存在 localstorage 中，并复制出来，用 node 解析文件，生成接口文件
• 在接口统一拦截处，成功返回后调用本地服务并生成接口文件
• 全局使用 Object.defineProperties 监听 fetch，接口成功返回后调用本地服务并生成接口文件