草庐IT

努力一周，开源一个超好用的接口Mock工具——Msw-Tools

天問_ 2023-04-10 原文

作为一名前端开发，是不是总有这样的体验：基础功能逻辑和页面UI开发很快速，本来可以提前完成，但是接口数据联调很费劲，耗时又耗力，有时为了保证进度还不得不加加班。
为了摆脱这种痛苦，经过一周的努力，从零开发了一个灵活无依赖，且集成简单的数据接口 Mock 工具——Msw-Tools，已开源到 NPM，希望对前端小伙伴有所帮助。

一、前言

Msw-Tools（Mock Service Worker Tools）是一个基于 Msw.js 和 Svelte 构建的数据 Mock 工具，用于前后端接口数据联调，方便开发者在不同数据、不同场景下进行功能测试。

  • Msw-Tools 能做什么？
  • Msw-Tools 能做什么？
  • Msw-Tools 能做什么？

Msw-Tools 以浏览器 localStorage 为数据库，能让开发者分布式的在浏览器上建立一套独立的接口服务，前端人员在不依赖后端接口完成的情况下走正常的开发调试流程，开发者可以很精确自由的控制哪些接口使用 Msw-Tools 提供的本地 Mock 数据服务，哪些接口使用后端提供的接口数据服务。 再也不用担心加班熬夜调接口了，摸鱼什么的统统到碗里来 ^_^。

痛点引导需求，需求决定产品。

开发 Msw-Tools 最初为了解决我日常开发中遇到的痛点，也就是前边说的，前后端接口数据联调比较耗时，很容易影响开发进度。
早在以前也使用过很多相应的 Mock 方案，但是总感觉不够灵活，而大部分都需要在项目中写 Mock 数据的逻辑代码，这一点是我比较抵制的。因为这样做很容易造成代码耦合，甚至一不小心就会把Mock代码打包到生产环境。

二、前端常用的数据MOCK方案

前端常用的数据MOCK方案有以下几类：

  1. 代码侵入： 直接在代码中写死 Mock 数据，或者请求本地的 JSON 文件，总之，一切需要侵入代码切换环境的行为都是不好的，实际开发中最常用，但不推荐。
  2. 接口管理工具： 代表为 Apifix、Swagger、Yapi、Moco、Rap等，配置功能强大，有统一的接口管理后台，查找使用方便。但是重度依赖后端，前端发挥空间小，一般会作为大团队的基础建设而存在，维护成本比较高。
  3. 本地 node 服务器： 代表为 Json-server，基于本地 json 文件的增删改查，配置简单，自定义程度高。但是无法随着后端 API 的修改而自动修改。
  4. 请求拦截： 代表为 Mockjs，通过拦截特定的AJAX请求，并生成给定的数据类型的随机数，但是需要在业务代码中调用，有入侵性。
  5. 抓包工具： 代表为 Charles 、Fiddler 等软件工具，便于混合开发的问题排查、线上问题排查，但是使用和调试相对繁琐。
  6. 组合模式： 代表为 Easy-mock，提供在线服务和接口代理，官网建设中。
  7. 其他方案： 代表为 Jsonplaceholder，直接 fetch 远程的数据，文档简单。

三、Msw-Tools 灵感火花

很早以前用过 mockjs 来拦截数据，于是就很好奇，网络请求是怎么拦截的？恰好最近在 npm 上看到一个很不错的开源库 msw，原来这个也是做 Mock 数据的。于是就大概看了一下 mswjs官网介绍，其中提供了很灵活的API，让我们以 Express 路由的形式去配置 Mock 接口，但是所有的 mock 数据都是提前在代码中集成的。然后，我就在想能不能由 Mock 调试者或使用者自由的去配置接口 Url 和 Mock 数据，如果能实现，不仅开发者能灵活的配置想要的接口数据，而且测试人员也能很方便的来修改接口数据，以达到测试不同数据、不同场景的情况，并且还能避免修改数据库。

四、Msw-Tools 功能特点

  • 无框架限制： 使用 Svelte 独立封装的 Custom Web Components，像使用 div、span 等原生标签一样无感使用，不管是 Vue2/Vue3、React、Angular、Svelte、SolidJs 等流行框架，还是传统的多页面 HTML、JQuery、JSP、PHP 都可以轻松集成。
  • 无侵入性： 根据开发环境动态加载，与业务功能代码无依赖、无耦合、无关联。
  • 配置范围广： 个性化配置 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 项目为例：

  1. 在入口文件 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();
}
  1. 在根组件 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
  • 默认： /

使用参照：

  1. 访问 URL：https://tiven.cn， 对应的 Base：/， 使用 <msw-tools base="/" />。
  2. 访问 URL：https://tiven.cn/service/ ，对应的 Base：/service/，使用 <msw-tools base="/service/" />。

需要与打包工具和 Router 路由的 base 保持一致。请参考：

八、注意事项

  1. mockServiceWorker.js 文件只能放在静态文件目录中（/public），作为 Service Worker 服务的注册文件，不参与打包编译，只能以 相对路径 的形式引用，不然 Service Worker 服务无法注册，会导致请求拦截不生效。
  2. 由于浏览器 service Worker API 使用限制：只能在 https（已安装证书）、localhost、127.0.0.1 等服务下使用，否则控制台会出现 [MSW] Mocking enabled (fallback mode) 日志，也就是说 http 域名服务，包括本地 IP 服务，例如：http://10.168.44.123:3000/ 等服务下不可用。

九、演示体验

Msw-Tools 在线体验：msw-tools
Msw-Tools 在线体验：msw-tools
Msw-Tools 在线体验：msw-tools

十、TODO

  • 开启控制台的按钮可拖拽移动 ✔
  • Msw-Tools 功能持续优化
  • 封装 mswjs 相关API，减小打包体积
  • 规划中…

十一、使用反馈

欢迎广大 Front-ender 、Tester 体验使用，如有疑问或需求建议请到 Github Issues 提出。

闭门造车造轮子，过程很艰难，坚持才有收获。

Thank you ♪(･ω･)ﾉ

欢迎访问：天问博客

mdashMsw-Toolsquotltgt

有关努力一周，开源一个超好用的接口Mock工具——Msw-Tools的更多相关文章

  1. ruby - 使用 Vim Rails，您可以创建一个新的迁移文件并一次性打开它吗？ - 2

    使用带有Rails插件的vim，您可以创建一个迁移文件，然后一次性打开该文件吗？textmate也可以这样吗？ 最佳答案 你可以使用rails.vim然后做类似的事情::Rgeneratemigratonadd_foo_to_bar插件将打开迁移生成的文件，这正是您想要的。我不能代表textmate。 关于ruby-使用VimRails，您可以创建一个新的迁移文件并一次性打开它吗？，我们在StackOverflow上找到一个类似的问题： https://sta

  2. ruby-on-rails - Rails - 一个 View 中的多个模型 - 2

    我需要从一个View访问多个模型。以前，我的links_controller仅用于提供以不同方式排序的链接资源。现在我想包括一个部分(我假设)显示按分数排序的顶级用户(@users=User.all.sort_by(&:score))我知道我可以将此代码插入每个链接操作并从View访问它，但这似乎不是“ruby方式”，我将需要在不久的将来访问更多模型。这可能会变得很脏，是否有针对这种情况的任何技术？注意事项:我认为我的应用程序正朝着单一格式和动态页面内容的方向发展，本质上是一个典型的网络应用程序。我知道before_filter但考虑到我希望应用程序进入的方向，这似乎很麻烦。最终从任何

  3. ruby-on-rails - 渲染另一个 Controller 的 View - 2

    我想要做的是有2个不同的Controller，client和test_client。客户端Controller已经构建，我想创建一个test_clientController，我可以使用它来玩弄客户端的UI并根据需要进行调整。我主要是想绕过我在客户端中内置的验证及其对加载数据的管理Controller的依赖。所以我希望test_clientController加载示例数据集，然后呈现客户端Controller的索引View，以便我可以调整客户端UI。就是这样。我在test_clients索引方法中试过这个:classTestClientdefindexrender:template=>

  4. ruby-on-rails - 如果 Object::try 被发送到一个 nil 对象，为什么它会起作用？ - 2

    如果您尝试在Ruby中的nil对象上调用方法，则会出现NoMethodError异常并显示消息:"undefinedmethod‘...’fornil:NilClass"然而，有一个tryRails中的方法，如果它被发送到一个nil对象，它只返回nil:require'rubygems'require'active_support/all'nil.try(:nonexisting_method)#noNoMethodErrorexceptionanymore那么try如何在内部工作以防止该异常？ 最佳答案 像Ruby中的所有其他对象

  5. ruby - 为什么 SecureRandom.uuid 创建一个唯一的字符串？ - 2

    关闭。这个问题需要detailsorclarity.它目前不接受答案。想改进这个问题吗？通过editingthispost添加细节并澄清问题.关闭8年前。Improvethisquestion为什么SecureRandom.uuid创建一个唯一的字符串？SecureRandom.uuid#=>"35cb4e30-54e1-49f9-b5ce-4134799eb2c0"SecureRandom.uuid方法创建的字符串从不重复？

  6. ruby-on-rails - Rails - 从另一个模型中创建一个模型的实例 - 2

    我有一个正在构建的应用程序，我需要一个模型来创建另一个模型的实例。我希望每辆车都有4个轮胎。汽车模型classCar轮胎模型classTire但是，在make_tires内部有一个错误，如果我为Tire尝试它，则没有用于创建或新建的activerecord方法。当我检查轮胎时，它没有这些方法。我该如何补救？错误是这样的:未定义的方法'create'forActiveRecord::AttributeMethods::Serialization::Tire::Module我测试了两个环境:测试和开发，它们都因相同的错误而失败。 最佳答案

  7. ruby - 用 Ruby 编写一个简单的网络服务器 - 2

    我想在Ruby中创建一个用于开发目的的极其简单的Web服务器(不，不想使用现成的解决方案)。代码如下:#!/usr/bin/rubyrequire'socket'server=TCPServer.new('127.0.0.1',8080)whileconnection=server.acceptheaders=[]length=0whileline=connection.getsheaders想法是从命令行运行这个脚本，提供另一个脚本，它将在其标准输入上获取请求，并在其标准输出上返回完整的响应。到目前为止一切顺利，但事实证明这真的很脆弱，因为它在第二个请求上中断并出现错误:/usr/b

  8. ruby - 一个 YAML 对象可以引用另一个吗？ - 2

    我想让一个yaml对象引用另一个，如下所示:intro:"Hello,dearuser."registration:$introThanksforregistering!new_message:$introYouhaveanewmessage!上面的语法只是它如何工作的一个例子(这也是它在thiscpanmodule中的工作方式。)我正在使用标准的ruby​​yaml解析器。这可能吗？ 最佳答案 一些yaml对象确实引用了其他对象:irb>require'yaml'#=>trueirb>str="hello"#=>"hello"ir

  9. ruby - Rails 关联 - 同一个类的多个 has_one 关系 - 2

    我的问题的一个例子是体育游戏。一场体育比赛有两支球队，一支主队和一支客队。我的事件记录模型如下:classTeam"Team"has_one:away_team,:class_name=>"Team"end我希望能够通过游戏访问一个团队，例如:Game.find(1).home_team但我收到一个单元化常量错误:Game::team。谁能告诉我我做错了什么？谢谢， 最佳答案 如果Gamehas_one:team那么Rails假设您的teams表有一个game_id列。不过，您想要的是games表有一个team_id列，在这种情况下

  10. ruby - 将一个超薄文件包含在另一个超薄文件中 - 2

    我在一个静态网站上工作(因此没有真正的服务器支持)，我想在另一个网站中包含一个小的细长片段，可能会向它传递一个变量。这可能吗？在rails中很容易，虽然是render方法，但我不知道如何在slim上做(显然load方法不适用于slim)。 最佳答案 Slim包含Include插件，允许在编译时直接在模板文件中包含其他文件:require'slim/include'includepartial_name文档可在此处获得:https://github.com/slim-template/slim/blob/master/doc/incl

随机推荐