{"_id":"@but0nly/mock-tool","_rev":"2-473d108050b2998d2839ed002aae0c49","name":"@but0nly/mock-tool","dist-tags":{"latest":"0.1.1"},"versions":{"0.1.0":{"name":"@but0nly/mock-tool","version":"0.1.0","keywords":[],"author":"","license":"ISC","_id":"@but0nly/mock-tool@0.1.0","maintainers":[{"name":"but0nly","email":"web_ripple@163.com"}],"dist":{"shasum":"c02dde53b73627ed34e43a362295ca85db6ea5e3","tarball":"https://registry.npmjs.org/@but0nly/mock-tool/-/mock-tool-0.1.0.tgz","fileCount":4,"integrity":"sha512-FAFFKUBFZy2RmXwUMeEZ0bmqh3l07DHybE09w40a96XmT7xeH6OAIRBKnO8svSpf052+lpnY/P3hyzQ+uLaXQw==","signatures":[{"sig":"MEUCIQCnYtwVSptPRwqc7Kp5Jjw9oxh/2WG0x+AUK8G63xgAHQIgLoQuKgJWgG4mveqwNFbikaRgyGpW4NqaiNMcMiJTVy0=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":46790},"main":"dist/mock-injector.cjs.js","type":"module","module":"dist/mock-injector.esm.js","exports":{".":{"import":"./dist/mock-injector.esm.js","require":"./dist/mock-injector.cjs.js"},"./mock-sw":"./dist/mock-sw.js"},"scripts":{"build":"rollup -c","build:prod":"NODE_ENV=production rollup -c","prepublishOnly":"npm run build"},"_npmUser":{"name":"but0nly","email":"web_ripple@163.com"},"_npmVersion":"8.19.4","description":"一个基于可重复使用的Web组件和Service Worker的网络模拟工具。","directories":{},"_nodeVersion":"16.20.0","_hasShrinkwrap":false,"devDependencies":{"rollup":"4.53.3","rollup-plugin-copy":"3.5.0","rollup-plugin-terser":"7.0.2","@rollup/plugin-commonjs":"29.0.0","@rollup/plugin-node-resolve":"16.0.3"},"_npmOperationalInternal":{"tmp":"tmp/mock-tool_0.1.0_1764258219911_0.9704092163673059","host":"s3://npm-registry-packages-npm-production"}},"0.1.1":{"name":"@but0nly/mock-tool","version":"0.1.1","description":"一个基于可重复使用的Web组件和Service Worker的网络模拟工具。","type":"module","main":"dist/mock-injector.cjs.js","module":"dist/mock-injector.esm.js","exports":{".":{"import":"./dist/mock-injector.esm.js","require":"./dist/mock-injector.cjs.js"},"./mock-sw":"./dist/mock-sw.js"},"scripts":{"build":"rollup -c","build:prod":"NODE_ENV=production rollup -c","prepublishOnly":"npm run build"},"keywords":[],"author":"","license":"ISC","devDependencies":{"@rollup/plugin-commonjs":"29.0.0","@rollup/plugin-node-resolve":"16.0.3","rollup":"4.53.3","rollup-plugin-copy":"3.5.0","rollup-plugin-terser":"7.0.2"},"_id":"@but0nly/mock-tool@0.1.1","_nodeVersion":"16.20.0","_npmVersion":"8.19.4","dist":{"integrity":"sha512-uzZp3uK+T8jTg5RkcDFZTTebq1/Jr9jSlike7bFktboVc1rim12E8mT1u3KqgcdPUUtbe390eh+E9DWAnIQsKw==","shasum":"265ef50493280903ce8a044ae2192dabadbf797d","tarball":"https://registry.npmjs.org/@but0nly/mock-tool/-/mock-tool-0.1.1.tgz","fileCount":5,"unpackedSize":51123,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEUCIQCpuupMmVQlhtKfQ+TEb4w9AOEW0odmh9ZVVGFF0E6D+QIgarMtaKTr8NSyzG8bHeQENNOp4LgHdpl6amuxj0EKVVk="}]},"_npmUser":{"name":"but0nly","email":"web_ripple@163.com"},"directories":{},"maintainers":[{"name":"but0nly","email":"web_ripple@163.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/mock-tool_0.1.1_1764258798776_0.44191988463516974"},"_hasShrinkwrap":false}},"time":{"created":"2025-11-27T15:43:39.831Z","modified":"2025-11-27T15:53:19.162Z","0.1.0":"2025-11-27T15:43:40.097Z","0.1.1":"2025-11-27T15:53:18.984Z"},"license":"ISC","keywords":[],"description":"一个基于可重复使用的Web组件和Service Worker的网络模拟工具。","maintainers":[{"name":"but0nly","email":"web_ripple@163.com"}],"readme":"# 🌐 Mock Tool\n\n**Service Worker + Web Component 驱动的可复用网络请求模拟工具**\n\n[](https://www.google.com/search?q=https://www.npmjs.com/package/%40your-scope/mock-network-tool)\n[](https://www.google.com/search?q=LICENSE)\n[](https://www.google.com/search?q=https://github.com/your-repo/mock-tool)\n\n## ✨ 简介\n\n`@but0nly/mock-tool` 是一个轻量级、零侵入式的网络请求模拟（Mock）工具。它通过 **Service Worker (SW)** 在网络层面进行拦截，并提供一个基于 **Web Component** 的调试 UI 面板。\n\n本工具旨在解决开发环境中的以下痛点：\n\n1.  无需修改应用代码，即可模拟任何 `fetch` 或 `XMLHttpRequest` 请求。\n2.  支持 **URL 通配符 (`*`)** 进行模糊匹配。\n3.  通过本地 `localStorage` 存储规则，Mock 状态持久化。\n4.  提供请求日志、请求体/头查看、Mock 响应编辑等功能。\n\n## 📦 安装\n\n使用您喜欢的包管理器进行安装：\n\n```bash\n# 使用 pnpm\npnpm install @but0nly/mock-tool --save-dev\n\n# 或使用 npm\nnpm install @but0nly/mock-tool --save-dev\n```\n\n**(注意：建议作为开发依赖安装)**\n\n## 🚀 快速上手 (集成到 Webpack/Vite 项目)\n\n由于本工具使用 Service Worker，集成需要两个步骤：**复制 SW 文件** 和 **初始化 JS 逻辑**。\n\n### 步骤 1: 复制 Service Worker 文件 (关键)\n\n您必须确保 `mock-sw.js` 文件被复制到您项目构建产物（例如 `dist/` 或 `build/`）的**根目录**，以确保 Service Worker 的作用域覆盖整个应用。\n\n以 **Webpack** 为例，使用 `copy-webpack-plugin`:\n\n```javascript\n// webpack.config.js (宿主应用)\n\nconst path = require('path');\nconst CopyWebpackPlugin = require('copy-webpack-plugin');\n\nmodule.exports = {\n  // ... 其他配置 ...\n\n  plugins: [\n    new CopyWebpackPlugin({\n      patterns: [\n        {\n          // 从 node_modules 导入 SW 文件\n          from: path.resolve(__dirname, 'node_modules/@your-scope/mock-network-tool/dist/mock-sw.js'),\n          to: 'mock-sw.js', // 目标：复制到 'dist' 根目录\n        },\n      ],\n    }),\n    // ...\n  ],\n};\n```\n\n### 步骤 2: 初始化 Mock Panel\n\n在您应用的主入口文件（例如 `main.js` 或 `index.js`）中，导入并调用初始化函数。\n\n```javascript\n// main.js (宿主应用)\n\n// 导入初始化方法\nimport { initializeMockPanel } from '@your-scope/mock-network-tool';\n\n// 推荐只在开发环境启用\nif (process.env.NODE_ENV === 'development') {\n    // 自动注册 Service Worker 并将 UI 面板插入到 body 中\n    initializeMockPanel(); \n}\n\n// ... 您的应用代码 ...\n```\n\n## 🛠️ 使用方法\n\n一旦初始化成功，一个浮动的调试面板将出现在浏览器右下角。\n\n### 1\\. 记录与查看\n\n所有发出的网络请求都会实时显示在左侧列表中，包括请求 URL、Status Code 和 Mock 状态。\n\n### 2\\. 创建 Mock 规则\n\n1.  **选中请求：** 点击左侧列表中的任意请求行。\n2.  **切换到 Mock 编辑 Tab：** 导航到 \"Mock 编辑\" 标签页。\n3.  **编辑响应：** 在文本区域输入您希望模拟的 JSON 响应体。\n4.  **设置状态码：** 输入自定义的状态码（例如 200, 403, 500）。\n5.  **保存规则：** 点击 **\"保存 Mock 规则\"** 按钮。\n\n规则保存后，所有匹配该 URL 的请求将立即被 Service Worker 拦截，并返回您自定义的响应和状态码。\n\n### 3\\. 通配符 (Wildcard) 匹配\n\n您可以在编辑规则时，将 URL 修改为包含通配符 (`*`) 的模式，以匹配一组相似的请求。\n\n| 规则 URL | 匹配示例 |\n| :--- | :--- |\n| `/api/users/*` | 匹配 `/api/users/123` 和 `/api/users/profile` |\n| `/api/config?*` | 匹配 `/api/config?v=1` 和 `/api/config?env=dev` |\n\n## ⚙️ 核心原理\n\n  * **Service Worker (SW):** 位于浏览器和服务端之间，拦截所有 `fetch` 请求。它负责检查 `localStorage` 中是否存在匹配的 Mock 规则，并返回 `new Response()` 以模拟网络响应。\n  * **Web Component (`<network-mock-panel>`):** 提供一个隔离的 UI 环境（Shadow DOM），负责展示请求日志、提供编辑界面，并将用户的 Mock 规则通过 `localStorage` 写入并通知 SW。\n\n## 🤝 贡献与反馈\n\n欢迎提交 Issue 和 Pull Request！\n\n-----\n\n**作者:** [but0nly](https://github.com/but0nly)","readmeFilename":"README.md"}