1. 首頁 > 生活百科 > >

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

生活百科

作為一名前端開發，是不是總有這樣的體驗：基礎功能邏輯和頁面UI開發很快速，本來可以提前完成，但是接口數據聯調很費勁，耗時又耗力，有時為了保證進度還不得不加加班 。為了擺脫這種痛苦 ， 經過一周的努力，從零開發了一個靈活無依賴，且集成簡單的數據接口 Mock 工具——Msw-Tools，已開源到 NPM，希望對前端小伙伴有所幫助 。

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

文章插圖
一、前言Msw-Tools（Mock Service Worker tools）是一個基于 Msw.js 和 Svelte 構建的數據 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 等原生標簽一樣無感使用 。
  • 無侵入性： 根據開發環境動態加載，與業務功能代碼無依賴、無耦合、無關聯 。
  • 配置范圍廣： 個性化配置 Mock 接口，Response Data、Status Code、Request Pending Time 。
  • 控制粒度細： 可以精確控制到每一個數據接口是否使用 Mock 。
  • 操作友好性： 一鍵編輯，數據格式化，一鍵配置，即刻生效 。
  • 數據便捷性： Mock 數據支持以 JSON 文件的形式一鍵導入，一鍵導出 。
五、接入使用Method 1: Using npm：(Recommended)
  • 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 項目為例：
  1. 在入口文件 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();}

推薦閱讀