Skip to content
On this page

团队协作

在多人团队协作开发过程中,会不可避免的遇上 多个人同时修改某一份mock file,导致代码冲突的问题。

一方面,可以通过建立一些协作方案,指定 mock file 维护规范,来避免问题。 另一方面,在插件内部,也提供了 团队协作冲突问题的一种解决方案,同时也提高调试效率。

协作方案

文件目录管理 中,我们给出了如何规范化,细化管理 mock file 的推荐方式, 但即使细化到了 单一接口 + 参数验证 为单个文件时,还是无法避免 多人同时改动改接口导致冲突。

在这种场景下,一种推荐的解决方案是,将 mock 文件本地化,忽略该 mock 文件 提交到 git:

新建 *.local.mock.ts 文件,并在 gitignore 中新增 *.local.mock.* 的配置。

插件依然会正确加载该文件,并且团队成员在各自的开发机本地修改该文件,由于不会被提交,可直接避免文件冲突的问题。

referer query

感谢 jiadesen 提出了该 feature 以及代码贡献!

*.local.mock.* 在一定程度上可以解决冲突问题,但也导致了团队成员无法直接共享这些 mock file,需要通过第三方的工具实现互传共享。

其实,只要提供一种不用 mock api 的 request headers/body/query/paramsvalidator 的方式,就可以很好的解决这个问题。

那么,选择使用发起 mock api 的来源页地址来区分,是一种很好的方式,因为这种方式可以使我们直接在 浏览器地址栏中,直接修改地址即可区分返回不同的参数!

而发起 mock api 的来源页地址,也将会附带在 mock request referer 字段上,所以插件内可以通过解析 referer 来实现 一个新的 validator

如以下配置:

ts
import { defineMock } from 'vite-plugin-mock-dev-server'

export default defineMock({
  url: '/api/demo',
  validator: {
    refererQuery: {
      a: 1
    }
  },
  body: {
    message: 'request from "http://example.com/?a=1"'
  }
})
import { defineMock } from 'vite-plugin-mock-dev-server'

export default defineMock({
  url: '/api/demo',
  validator: {
    refererQuery: {
      a: 1
    }
  },
  body: {
    message: 'request from "http://example.com/?a=1"'
  }
})

/api/demo 接口只会响应来自带了 ?a=1 的请求来源地址,如 http://example.com/?a=1

所以可以基于 refererQuery,进行 mock file 的拆分,根据 团队指定的协作规范,细化文件管理。

而直接通过修改 浏览器地址栏的地址,还可以直接跳过vite编译,直接重新加载页面数据,提高调试效率。

Released under the MIT License.