作为一名前端开发，是不是总有这样的体验：基础功能逻辑和页面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 远程的数据 ， 文档简单 。
- 灵感： 很早以前用过
mockjs来拦截数据，于是就很好奇，网络请求是怎么拦截的？恰好最近在 npm 上看到一个很不错的开源库 msw，原来这个也是做 Mock 数据的 。于是就大概看了一下 mswjs官网介绍，其中提供了很灵活的API，让我们以 Express 路由的形式去配置 Mock 接口，但是所有的 mock 数据都是提前在代码中集成的 。然后，我就在想能不能由 Mock 调试者或使用者自由的去配置接口 Url 和 Mock 数据，如果能实现，不仅开发者能灵活的配置想要的接口数据，而且测试人员也能很方便的来修改接口数据，以达到测试不同数据、不同场景的情况 ， 并且还能避免修改数据库 。
- 无框架限制： 使用
Svelte独立封装的Custom Web Components，像使用div、span等原生标签一样无感使用 。 - 无侵入性： 根据开发环境动态加载，与业务功能代码无依赖、无耦合、无关联 。
- 配置范围广： 个性化配置 Mock 接口，Response Data、Status Code、Request Pending Time 。
- 控制粒度细： 可以精确控制到每一个数据接口是否使用 Mock 。
- 操作友好性： 一键编辑，数据格式化，一键配置，即刻生效 。
- 数据便捷性： Mock 数据支持以 JSON 文件的形式一键导入，一键导出 。
- install
msw-tools和msw
npm install -D msw-toolsnpm install -D msw- install
mockServiceWorker.js。每个脚手架生成的项目，静态文件目录可能不同，具体请参考：Common public directories
npx msw init public/ --saveMethod 2: Using CDN in HTML:<body><msw-tools base="/"></msw-tools><script src="http://img.zhejianglong.com/231017/1ZRW938-1.jpg"></script></body>六、Example以 Vue3 项目为例：- 在入口文件
main.js中根据环境来动态加载
// main.jsimport { 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();}
推荐阅读
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- 搞笑努力奋斗的句子 搞笑又奋斗的句子
- 沈阳新生儿黄疸怎么办
- 青春校园读书的语句
- 女生健身的幽默语录 女生健身幽默语录
- 一周年情话简短六个字 情话简短六个字
- 复活草面膜一周敷几次
- 废铁一周行情 铁卖废品多少钱一斤
- 胎儿双顶径一周长多少正常 胎儿双顶径多少周长的最快
- 早上上班的说说心情短语 早上上班的说说
- 要多努力才能考上中山大学 多努力才能上中山大学？
