Mocxykit

🚀 mocxy 本地開發環境代理工具

mocxy 是一款強大的本地開發環境代理工具，它支持 Ngrok 公網訪問、環境變量管理、MCP 數據請求、Faker MOCK 數據生成以及靜態資源緩存等實用功能，能有效提升開發效率。

🚀 快速開始

Ngrok 公網訪問

要使用 Ngrok 實現公網訪問，請按照以下步驟操作：

1. 訪問配置頁面：http://localhost:3000/config
2. 點擊右上角的設置圖標
3. 在 Ngrok 控制檯 註冊免費賬號
4. 複製 Ngrok 賬號的 authtoken
5. 將 authtoken 粘貼到設置窗口中
6. 點擊“開啟外網訪問”

⚠️ 重要提示

• 免費版 Ngrok 存在使用限制
• 每次創建新隧道時，公網 URL 會重新生成

環境變量管理

要啟用環境變量功能，請按照以下步驟操作：

1. 使用帶有 DefinePlugin 的 webpack 配置
2. 在 webpack 中添加 WebpackProxyMockPlugin
3. 或者在 vite 插件中，將 viteProxyMockPlugin 添加到 vite.config.js

MCP 數據請求支持

在 AI 編程中使用 MCP 請求數據，請參考以下示例：

示例 1: 獲取 todo 列表數據

// 在 @todoList.tsx 中實現 todo 列表功能

AI 將自動請求 api/todo-list 接口的數據結構，並根據返回結果生成代碼。

示例 2: 處理錯誤信息

// 請求 api/todo-list 接口，處理錯誤反饋

AI 將獲取錯誤數據並分析其結構，隨後生成彈層顯示錯誤信息。

Faker MOCK 數據支持

Faker MOCK 功能提供了靈活的數據生成能力：

1. 在 MOCK 數據編輯頁面勾選“返回隨機數據”
2. 填寫需要隨機化的字段路徑
3. 支持的語法格式包括：
   • data：隨機化整個 data 對象
   • data.list：僅隨機化 list 字段
   • data.list<100>：生成 100 條隨機數據
   • data,page.total：多個字段隨機化

靜態資源緩存

mocxy 提供高效的靜態資源緩存功能：

• 自動緩存：快速加載靜態資源
• 多級緩存機制：提升訪問速度
• 可配置清理策略：手動或自動清空緩存

✨ 主要特性

• Ngrok 公網訪問：方便將本地服務暴露到公網。
• 環境變量管理：支持創建多環境配置，綁定特定代理，快速切換環境。
• MCP 數據請求支持：在 AI 編程中可便捷請求數據。
• Faker MOCK 數據生成：提供靈活的數據隨機化能力。
• 靜態資源緩存：具備自動緩存、多級緩存機制和可配置清理策略。

📦 安裝指南

文檔未提及安裝步驟，故跳過此章節。

💻 使用示例

基礎用法

// 在 @todoList.tsx 中實現 todo 列表功能

高級用法

// 請求 api/todo-list 接口，處理錯誤反饋

📚 詳細文檔

環境變量管理

環境變量支持以下操作：

1. 創建多個環境配置
2. 將環境變量綁定到特定代理
3. 快速切換不同環境
4. 切換環境時可以選擇清理緩存

獲取幫助

如需進一步幫助，請聯繫 開發者郵箱 或訪問 官方文檔。

⚠️ 重要提示

本文檔僅為示例內容，具體功能和操作請以實際工具為準。