基于 TypeScript 和 Mockjs 的 vite 插件的接口模拟研究

186 阅读1分钟

之前写过 基于 TypeScript 和 swagger 后端文档进行接口智能提示和校验的研究续集 ,在里面探讨了如何对接口进行提示和校验,对开发体验提升非常明显,但是有个痛点就是在前后端同时开发时没法得到符合接口类型的数据。自己造数据放在代码里面对我这个洁癖患者来说,实在无法忍受。于是时隔几年这个根据 ts 类型定义的接口模拟数据的研究就新鲜出炉。

  1. 通过 ts-json-schema-generator 将定义的接口类型转换成 json-schema 对象
  2. json-schema 对象遍历转换成 Mockjs 的模板
  3. 在 vite 插件里面对 proxy 配置和 middleware 插入处理函数拦截请求,匹配到对应的接口请求时,使用 Mockjs 生成数据返回到前端。对于 proxy 的数据仅拦截代理失败的接口,这样既能不耽搁和后端的数据对接,也不影响未开发的接口的数据模拟。
  4. 同时扩展了 jsdoc 的注释能力。在 @format 注释上可以自定义数据类型的模板,比如 name/date/sentence 等;在 @pattern 注释上则自定义 mockjs 的生成规则;在 @description 著室内有 ~debug 时可以打印生成的 mockjs 数据模板,查看是否否和 mockjs 的模板要求

具体如何食用请参考 vite-plugin-apits2mock