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

2022 年 9 月 28 日
筆記
Mocking, npm, Svelte, 單元測試, 大前端, 工具

作為一名前端開發，是不是總有這樣的體驗：基礎功能邏輯和頁面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="//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：//tiven.cn，對應的 Base：/，使用 <msw-tools base="/" />。
訪問 URL：//tiven.cn/service/ ，對應的 Base：/service/，使用 <msw-tools base="/service/" />。

需要與打包工具和 Router 路由的 base 保持一致。請參考：

Vite 的 base 配置：Vite Base
Vue3 的 Router/base 路由配置：Vue3 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，減小打包體積
規劃中…

十一、使用回饋

Email： [email protected]
Issues： msw-tools

歡迎廣大 Front-ender 、Tester 體驗使用，如有疑問或需求建議請到 Github Issues 提出。

閉門造車造輪子，過程很艱難，堅持才有收穫。

Thank you ♪(･ω･)ﾉ

歡迎訪問：天問部落格

Tags: Mocking npm Svelte 單元測試大前端工具