努力一周,开源一个超好用的接口Mock工具——Msw-Tools - 天問-专注于大前端
source link: https://www.cnblogs.com/tive/p/16739059.html
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
努力一周,开源一个超好用的接口Mock工具——Msw-Tools
作为一名前端开发,是不是总有这样的体验:基础功能逻辑和页面UI开发很快速,本来可以提前完成,但是接口数据联调很费劲,耗时又耗力,有时为了保证进度还不得不加加班。
为了摆脱这种痛苦,经过一周的努力,从零开发了一个灵活无依赖,且集成简单的数据接口 Mock 工具——Msw-Tools,已开源到 NPM,希望对前端小伙伴有所帮助。
Msw-Tools
(Mock Service Worker tools)是一个基于 Msw.js
和 Svelte
构建的数据 Mock 工具,用于前后端接口数据联调,和不同数据、不同场景的功能测试。
痛点引导需求,需求决定产品。
开发 Msw-Tools 最初为了解决我日常开发中遇到的痛点,也就是前边说的,前后端接口数据联调比较耗时,很容易影响开发进度。
早在以前也使用过很多相应的 Mock 方案,但是总感觉不够灵活,而大部分都需要在项目中写 Mock 数据的逻辑代码,这一点是我比较抵制的。因为这样做很容易造成代码耦合,甚至一不小心就会把Mock代码打包到生产环境。
二、前端常用的常用的MOCK方案
前端常用的常用的MOCK方案有以下几类:
- 代码侵入: 直接在代码中写死 Mock 数据,或者请求本地的 JSON 文件,总之,一切需要侵入代码切换环境的行为都是不好的,实际开发中最常用,但不推荐。
- 接口管理工具: 代表为 Apifix、Swagger、Yapi、Moco、Rap等,配置功能强大,有统一的接口管理后台,查找使用方便。但是重度依赖后端,前端发挥空间小,一般会作为大团队的基础建设而存在,维护成本比较高。
- 本地 node 服务器: 代表为 Json-server,基于本地 json 文件的增删改查,配置简单,自定义程度高。但是无法随着后端 API 的修改而自动修改。
- 请求拦截: 代表为 Mockjs,通过拦截特定的AJAX请求,并生成给定的数据类型的随机数,但是需要在业务代码中调用,有入侵性。
- 抓包工具: 代表为 Charles 、Fiddler 等软件工具,便于混合开发的问题排查、线上问题排查,但是使用和调试相对繁琐。
- 组合模式: 代表为 Easy-mock,提供在线服务和接口代理,官网建设中。
- 其他方案: 代表为 Jsonplaceholder,直接 fetch 远程的数据,文档简单。
三、Msw-Tools 灵感火花
- 灵感: 很早以前用过
mockjs
来拦截数据,于是就很好奇,网络请求是怎么拦截的?恰好最近在 npm 上看到一个很不错的开源库 msw,原来这个也是做 Mock 数据的。于是就大概看了一下 mswjs官网介绍,其中提供了很灵活的API,让我们以 Express 路由的形式去配置 Mock 接口,但是所有的 mock 数据都是提前在代码中集成的。然后,我就在想能不能由 Mock 调试者或使用者自由的去配置接口 Url 和 Mock 数据,如果能实现,不仅开发者能灵活的配置想要的接口数据,而且测试人员也能很方便的来修改接口数据,以达到测试不同数据、不同场景的情况,并且还能避免修改数据库。
四、Msw-Tools 功能特点
- 无框架限制: 使用
Svelte
独立封装的Custom Web Components
,像使用div、span
等原生标签一样无感使用。 - 无侵入性: 根据开发环境动态加载,与业务功能代码无依赖、无耦合、无关联。
- 配置范围广: 个性化配置 Mock 接口,Response Data、Status Code、Request Pending Time。
- 控制粒度细: 可以精确控制到每一个数据接口是否使用 Mock。
- 操作友好性: 一键编辑,数据格式化,一键配置,即刻生效。
- 数据便捷性: Mock 数据支持以 JSON 文件的形式一键导入,一键导出。
五、接入使用
Method 1: Using npm:(Recommended)
- install
msw-tools
和msw
npm install -D msw-tools npm install -D msw
- install
mockServiceWorker.js
。每个脚手架生成的项目,静态文件目录可能不同,具体请参考:Common public directories
npx msw init public/ --save
Method 2: Using CDN in HTML:
<body> <msw-tools base="/"></msw-tools> <script src="https://unpkg.com/msw-tools@latest/dist/msw-tools.min.umd.js"></script></body>
六、Example
以 Vue3 项目为例:
- 在入口文件
main.js
中根据环境来动态加载
// main.js import { createApp } from "vue";import router from "./router";import store from "./store";import App from "./App.vue";import "./assets/css/style.scss"; const app = createApp(App); app.use(router).use(store);app.mount("#app"); if (process.env.NODE_ENV === "development") { const MswTools = require("msw-tools"); new MswTools();}
- 在根组件
App.vue
中使用<msw-tools />
导入
<template> <msw-tools base="/" v-if="isDev" /> <router-view /></template> <script setup> import { ref } from "vue"; const isDev = ref(process.env.NODE_ENV === "development");</script>
七、参数配置
base:开发或生产环境服务的公共基础路径。
- 类型:
string
- 默认:
/
使用参照:
- 访问 URL:
https://tiven.cn
, 对应的 Base:/
, 使用<msw-tools base="/" />
。 - 访问 URL:
https://tiven.cn/service/
,对应的 Base:/service/
,使用<msw-tools base="/service/" />
。
需要与打包工具和 Router 路由的 base 保持一致。请参考:
八、注意事项
mockServiceWorker.js
文件只能放在静态文件目录中(/public
),作为Service Worker
服务的注册文件,不参与打包编译,只能以 相对路径 的形式引用,不然Service Worker
服务无法注册,会导致请求拦截不生效。service Worker
API使用限制:只能在 https(已安转证书)、localhost、127.0.0.1 等服务下使用,否则控制台会出现[MSW] Mocking enabled (fallback mode)
日志,也就是说 http 域名服务下不可用。
九、演示体验
Msw-Tools 在线体验:msw-tools
十、TODO
- Msw-Tools 功能持续优化
- 开启控制台的按钮可拖拽移动
- 封装 mswjs 相关API,减小打包体积
- 规划中...
十一、使用反馈
欢迎广大 Front-ender 、Tester 体验使用,如有疑问或需求建议请到 Github Issues 提出。
闭门造车造轮子,过程很艰难,坚持才有收获。
Thank you ♪(・ω・)ノ
欢迎访问:天问博客
Recommend
-
6
我用 go-zero 一周实现了一个中台系统,已开源! kevinwan · 大约3小时之前 · 53 次点击 · 预计阅读时间 19 分钟 · 不到1分钟之前 开始浏览 ...
-
9
一个好用的智能栅格工具是如何诞生的?浙江大学 工业设计工程硕士在读原文首发语雀专栏 空谷札...
-
12
开源的在线接口文档wiki工具Mindoc的介绍与使用 |坐而言不如起而行! 二丫讲梵 > 意犹未尽 >
-
4
有没有bi智能报表,好用的开源报表工具 ...
-
8
十款开源又好用的Linux安全工具-51CTO.COM 十款开源又好用的Linux安全工具 作者:安全牛 2022-04-08 13:17:36 本文是国外媒体列出的一份Linux安全工具清单,列举了具有代表性的十个网络安全工具...
-
7
V2EX › 分享创造 [iOS | 送码] 回首一刻 —— 极简好用的目标管理,努力记录工具
-
2
十款免费又好用的开源威胁狩猎工具推荐 2023-04-13 11:39:05 本文收集整理了目前较受安全分析师青睐的10款免费开源威胁搜寻工具,并对其应用特点进行了分析。
-
0
不知不觉好用工具已经来到了第8期,作为一个软件开发者经常使用各种开发工具。相对于各种收费商业软件,市面上有很多开源免费的工具。本期就梳理一下常用的开源开发者工具所对应的开源版本工具。[TOC]1. 文件对比工具文本对比工具...
-
4
在之前的文章中,我们推荐了一些开源的开发工具,本期我们梳理一下开源的日常工具。本期工具包含:[TOC]1. 办公套件 LibreOffice提到 Office 办公软件我们都会想到 微软的 MSOffice,金山的WPS等,实际上也有开源版本,它就是:Lib...
-
5
大家冬至快乐呀~今天来分享 7 个好玩又好用的开源工具,还可以学习项目代码!PDF Guru:通用型 PDF 文件处理工具AiEditor:面向 AI 的下一代富文本编辑器pear-rec:实用工具集,包括截图、录屏、录音、录像等Pot:划...
About Joyk
Aggregate valuable and interesting links.
Joyk means Joy of geeK