作為一名前端開發(fā)幌蚊，是不是總有這樣的體驗：基礎(chǔ)功能邏輯和頁面UI開發(fā)很快速，本來可以提前完成凛澎，但是接口數(shù)據(jù)聯(lián)調(diào)很費勁霹肝，耗時又耗力，有時為了保證進度還不得不加加班塑煎。
為了擺脫這種痛苦沫换，經(jīng)過一周的努力，從零開發(fā)了一個靈活無依賴最铁，且集成簡單的數(shù)據(jù)接口 Mock 工具——Msw-Tools讯赏，已開源到 NPM，希望對前端小伙伴有所幫助冷尉。
一漱挎、前言
Msw-Tools（Mock Service Worker Tools）是一個基于 Msw.js 和 Svelte 構(gòu)建的數(shù)據(jù) Mock 工具，用于前后端接口數(shù)據(jù)聯(lián)調(diào)雀哨，方便開發(fā)者在不同數(shù)據(jù)磕谅、不同場景下進行功能測試。
Msw-Tools能做什么雾棺？Msw-Tools能做什么膊夹？Msw-Tools能做什么？
Msw-Tools 以瀏覽器 localStorage 為數(shù)據(jù)庫捌浩，能讓開發(fā)者分布式的在瀏覽器上建立一套獨立的接口服務(wù)放刨，前端人員在不依賴后端接口完成的情況下走正常的開發(fā)調(diào)試流程，開發(fā)者可以很精確自由的控制哪些接口使用 Msw-Tools 提供的本地 Mock 數(shù)據(jù)服務(wù)尸饺，哪些接口使用后端提供的接口數(shù)據(jù)服務(wù)进统。再也不用擔(dān)心加班熬夜調(diào)接口了，摸魚什么的統(tǒng)統(tǒng)到碗里來 ^_^浪听。
痛點引導(dǎo)需求螟碎，需求決定產(chǎn)品。
開發(fā) Msw-Tools 最初為了解決我日常開發(fā)中遇到的痛點馋辈，也就是前邊說的抚芦，前后端接口數(shù)據(jù)聯(lián)調(diào)比較耗時，很容易影響開發(fā)進度。
早在以前也使用過很多相應(yīng)的 Mock 方案叉抡，但是總感覺不夠靈活尔崔，而大部分都需要在項目中寫 Mock 數(shù)據(jù)的邏輯代碼，這一點是我比較抵制的褥民。因為這樣做很容易造成代碼耦合季春，甚至一不小心就會把Mock代碼打包到生產(chǎn)環(huán)境。
二消返、前端常用的數(shù)據(jù)MOCK方案
前端常用的數(shù)據(jù)MOCK方案有以下幾類：
- 代碼侵入： 直接在代碼中寫死 Mock 數(shù)據(jù)载弄，或者請求本地的 JSON 文件，總之撵颊，一切需要侵入代碼切換環(huán)境的行為都是不好的宇攻，實際開發(fā)中最常用，但不推薦倡勇。
- 接口管理工具： 代表為 Apifix逞刷、Swagger、Yapi妻熊、Moco夸浅、Rap等，配置功能強大扔役，有統(tǒng)一的接口管理后臺帆喇，查找使用方便。但是重度依賴后端亿胸，前端發(fā)揮空間小坯钦，一般會作為大團隊的基礎(chǔ)建設(shè)而存在，維護成本比較高侈玄。
- 本地 node 服務(wù)器： 代表為 Json-server葫笼，基于本地 json 文件的增刪改查，配置簡單拗馒，自定義程度高。但是無法隨著后端 API 的修改而自動修改溯街。
- 請求攔截： 代表為 Mockjs诱桂，通過攔截特定的AJAX請求，并生成給定的數(shù)據(jù)類型的隨機數(shù)呈昔，但是需要在業(yè)務(wù)代碼中調(diào)用挥等，有入侵性。
- 抓包工具： 代表為 Charles 堤尾、Fiddler 等軟件工具肝劲，便于混合開發(fā)的問題排查、線上問題排查，但是使用和調(diào)試相對繁瑣辞槐。
- 組合模式： 代表為 Easy-mock掷漱，提供在線服務(wù)和接口代理，官網(wǎng)建設(shè)中榄檬。
- 其他方案： 代表為 Jsonplaceholder卜范，直接 fetch 遠程的數(shù)據(jù)，文檔簡單鹿榜。
三海雪、Msw-Tools 靈感火花
很早以前用過 mockjs 來攔截數(shù)據(jù)，于是就很好奇舱殿，網(wǎng)絡(luò)請求是怎么攔截的奥裸？恰好最近在 npm 上看到一個很不錯的開源庫 msw，原來這個也是做 Mock 數(shù)據(jù)的沪袭。于是就大概看了一下 mswjs官網(wǎng)介紹湾宙，其中提供了很靈活的API，讓我們以 Express 路由的形式去配置 Mock 接口枝恋，但是所有的 mock 數(shù)據(jù)都是提前在代碼中集成的创倔。然后，我就在想能不能由 Mock 調(diào)試者或使用者自由的去配置接口 Url 和 Mock 數(shù)據(jù)焚碌，如果能實現(xiàn)畦攘，不僅開發(fā)者能靈活的配置想要的接口數(shù)據(jù)，而且測試人員也能很方便的來修改接口數(shù)據(jù)十电，以達到測試不同數(shù)據(jù)知押、不同場景的情況，并且還能避免修改數(shù)據(jù)庫鹃骂。
四台盯、Msw-Tools 功能特點
-
無框架限制： 使用
Svelte獨立封裝的Custom Web Components，像使用div畏线、span等原生標(biāo)簽一樣無感使用静盅，不管是 Vue2/Vue3、React寝殴、Angular蒿叠、Svelte、SolidJs 等流行框架蚣常，還是傳統(tǒng)的多頁面 HTML市咽、JQuery、JSP抵蚊、PHP 都可以輕松集成施绎。 - 無侵入性： 根據(jù)開發(fā)環(huán)境動態(tài)加載溯革，與業(yè)務(wù)功能代碼無依賴、無耦合谷醉、無關(guān)聯(lián)致稀。
- 配置范圍廣： 個性化配置 Mock 接口，Response Data孤紧、Status Code豺裆、Request Pending Time。
- 控制粒度細： 可以精確控制到每一個數(shù)據(jù)接口是否使用 Mock号显。
- 操作友好性： 一鍵編輯臭猜，數(shù)據(jù)格式化，一鍵配置押蚤，即刻生效蔑歌。
- 數(shù)據(jù)便捷性： Mock 數(shù)據(jù)支持以 JSON 文件的形式一鍵導(dǎo)入，一鍵導(dǎo)出揽碘。
五次屠、接入使用
Method 1: Using npm：(Recommended)
- install
msw-tools和msw
npm install -D msw-tools
npm install -D msw
- install
mockServiceWorker.js。每個腳手架生成的項目雳刺，靜態(tài)文件目錄可能不同劫灶，具體請參考：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中根據(jù)環(huán)境來動態(tài)加載
// 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 />導(dǎo)入
<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>
七掖桦、參數(shù)配置
base：開發(fā)或生產(chǎn)環(huán)境服務(wù)的公共基礎(chǔ)路徑本昏。
- 類型：
string - 默認：
/
使用參照：
- 訪問 URL：
https://tiven.cn， 對應(yīng)的 Base：/枪汪， 使用<msw-tools base="/" />涌穆。 - 訪問 URL：
https://tiven.cn/service/，對應(yīng)的 Base：/service/雀久，使用<msw-tools base="/service/" />宿稀。
需要與打包工具和 Router 路由的 base 保持一致。請參考：
八赖捌、注意事項
-
mockServiceWorker.js文件只能放在靜態(tài)文件目錄中（/public）祝沸，作為Service Worker服務(wù)的注冊文件，不參與打包編譯越庇，只能以 相對路徑 的形式引用奋隶，不然Service Worker服務(wù)無法注冊，會導(dǎo)致請求攔截不生效悦荒。 -
service WorkerAPI 使用限制：只能在 https（已安轉(zhuǎn)證書）、localhost嘹吨、127.0.0.1 等服務(wù)下使用搬味，否則控制臺會出現(xiàn)[MSW] Mocking enabled (fallback mode)日志，也就是說 http 域名服務(wù)，包括本地 IP 服務(wù)碰纬，例如：http://10.168.44.123:3000/等服務(wù)下不可用萍聊。
九、演示體驗
Msw-Tools 在線體驗：msw-tools
Msw-Tools 在線體驗：msw-tools
Msw-Tools 在線體驗：msw-tools
十悦析、TODO
- Msw-Tools 功能持續(xù)優(yōu)化
- 開啟控制臺的按鈕可拖拽移動
- 封裝 mswjs 相關(guān)API寿桨，減小打包體積
- 規(guī)劃中...
十一、使用反饋
- Email： tw.email@qq.com
- Issues： msw-tools
歡迎廣大 Front-ender 强戴、Tester 體驗使用亭螟，如有疑問或需求建議請到 Github Issues 提出。
閉門造車造輪子骑歹，過程很艱難预烙，堅持才有收獲。
Thank you (?ω?)?
歡迎訪問：天問博客
