mock-switch-webpack-plugin 1.0.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 lebron_shi
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,305 @@
+# Webpack Mock Switch Plugin
+
+<div align="center">
+
+![Version](https://img.shields.io/badge/version-1.0.0-blue.svg)
+![Webpack](https://img.shields.io/badge/webpack-%3E%3D5.0.0-green.svg)
+![License](https://img.shields.io/badge/license-MIT-yellow.svg)
+
+**基于 webpack5 的开发环境接口 Mock 一键切换插件**
+
+</div>
+
+## ✨ 特性
+
+### 🎯 核心功能
+- **🔄 浏览器端一键切换** - 页面内悬浮面板，Mock / 测试 / 生产环境无缝切换
+- **🔥 Mock 数据热更新** - 修改 Mock 文件立即生效，无需重启服务
+- **📝 自动记录真实接口** - 代理请求时自动记录返回，一键保存为 Mock 文件
+- **📂 自动路径匹配** - 根据接口路径自动查找对应 Mock 文件
+- **⚡ 零侵入式设计** - 纯 webpack 插件，无需修改业务代码
+
+### 🎨 界面预览
+- 右下角悬浮切换按钮，状态指示灯（绿=Mock/黄=测试/红=生产）
+- 优雅的下拉面板，环境列表 + 已记录接口
+- 点击即可保存真实接口返回为 Mock 文件
+
+## 🆚 与其他方案对比
+
+| 功能 | webpack-mock-switch-plugin | mocker-api | webpack-api-mocker | mockjs |
+|------|---------------------------|------------|-------------------|--------|
+| 浏览器端一键切换 | ✅ | ❌ | ❌ | ❌ |
+| Mock数据热更新 | ✅ | ✅ | ✅ | ❌ |
+| 自动记录真实接口 | ✅ | ❌ | ❌ | ❌ |
+| 一键保存为Mock | ✅ | ❌ | ❌ | ❌ |
+| 自动路径匹配 | ✅ | ✅ | ✅ | ❌ |
+| Webpack5支持 | ✅ | ✅ | ⚠️ | ❌ |
+| 零侵入集成 | ✅ | ⚠️ | ⚠️ | ❌ |
+| 动态Mock函数 | ✅ | ✅ | ✅ | ✅ |
+| 网络延迟模拟 | ✅ | ✅ | ❌ | ✅ |
+
+> **为什么选择我们？** 现有方案都只解决了部分问题，本插件一站式解决「环境切换麻烦、Mock数据难维护、需要手动写Mock」三大痛点。
+
+## 📦 安装
+
+```bash
+npm install webpack-mock-switch-plugin --save-dev
+# or
+yarn add webpack-mock-switch-plugin -D
+# or
+pnpm add webpack-mock-switch-plugin -D
+```
+
+## 🚀 快速开始
+
+### 1. 配置 webpack.config.js
+
+```javascript
+const WebpackMockSwitchPlugin = require('webpack-mock-switch-plugin');
+
+module.exports = {
+  // ... 其他配置
+  plugins: [
+    new WebpackMockSwitchPlugin({
+      // Mock文件目录（相对项目根目录）
+      mockDir: './mock',
+      // 接口前缀，只拦截该前缀的请求
+      apiPrefix: '/api',
+      // 环境配置
+      environments: {
+        mock: { name: 'Mock环境', target: null },
+        test: { name: '测试环境', target: 'http://localhost:3000' },
+        prod: { name: '生产环境', target: 'https://api.yourdomain.com' }
+      },
+      // 自动记录真实接口返回
+      autoRecord: true,
+      // 开启热更新
+      hotReload: true
+    })
+  ],
+  devServer: {
+    // 插件会自动注入中间件，无需额外配置
+    hot: true,
+    open: true
+  }
+};
+```
+
+### 2. 创建 Mock 文件
+
+在项目根目录创建 `mock` 文件夹，按以下命名规则创建文件：
+
+```
+mock/
+├── GET_user_list.json          # GET /api/user/list
+├── POST_user_login.js          # POST /api/user/login
+├── GET_user_1_detail.json      # GET /api/user/1/detail
+└── config.js                   # 其他配置
+```
+
+#### 静态 Mock (JSON)
+
+```json
+// mock/GET_user_list.json
+{
+  "code": 0,
+  "message": "success",
+  "data": {
+    "list": [
+      { "id": 1, "name": "张三" },
+      { "id": 2, "name": "李四" }
+    ]
+  },
+  "_delay": 500
+}
+```
+
+#### 动态 Mock (JS 函数)
+
+```javascript
+// mock/POST_user_login.js
+module.exports = function(req, res) {
+  const { username, password } = req.body;
+  
+  if (username === 'admin' && password === '123456') {
+    return {
+      code: 0,
+      message: '登录成功',
+      data: { token: 'mock_' + Date.now() }
+    };
+  }
+  
+  return {
+    code: 401,
+    message: '用户名或密码错误'
+  };
+};
+```
+
+### 3. 启动开发服务
+
+```bash
+npm run start
+```
+
+打开浏览器，你会看到右下角的悬浮切换按钮 🎉
+
+## ⚙️ 配置选项
+
+| 参数 | 类型 | 默认值 | 说明 |
+|------|------|--------|------|
+| `mockDir` | `string` | `./mock` | Mock 文件存放目录 |
+| `apiPrefix` | `string` | `/api` | 需要拦截的接口前缀 |
+| `environments` | `object` | 见下方 | 环境配置列表 |
+| `autoRecord` | `boolean` | `true` | 是否自动记录真实接口 |
+| `hotReload` | `boolean` | `true` | 是否开启 Mock 热更新 |
+| `port` | `number` | `38080` | 控制面板端口 |
+
+### environments 默认配置
+
+```javascript
+{
+  mock: { name: 'Mock环境', target: null },      // 本地Mock
+  test: { name: '测试环境', target: 'http://localhost:3000' },
+  prod: { name: '生产环境', target: 'https://api.example.com' }
+}
+```
+
+## 📖 使用指南
+
+### 1. 环境切换
+
+1. 点击右下角悬浮按钮打开面板
+2. 点击对应环境即可切换
+3. 状态指示灯会变色（绿/黄/红）
+4. 后续请求自动走对应环境
+
+### 2. 自动记录 & 保存 Mock
+
+1. 切换到测试/生产环境
+2. 正常调用接口（插件会自动记录返回）
+3. 打开面板，在「已记录的接口」列表中
+4. 点击「保存」按钮，自动生成 Mock 文件
+
+### 3. Mock 文件匹配规则
+
+插件会按以下优先级查找 Mock 文件：
+
+1. `{METHOD}_{path}.json` - 如 `GET_user_list.json`
+2. `{path}.json` - 如 `user_list.json`
+3. `{METHOD}_{path}.js` - 如 `GET_user_list.js`
+4. `{path}.js` - 如 `user_list.js`
+5. 目录结构匹配 - 如 `/mock/user/list.json`
+
+> 💡 提示：路径中的 `/` 会自动转换为 `_`
+
+### 4. 高级功能
+
+#### 模拟网络延迟
+
+在 JSON 中添加 `_delay` 字段：
+
+```json
+{
+  "code": 0,
+  "data": {},
+  "_delay": 1000  // 延迟1秒返回
+}
+```
+
+#### 动态 Mock 函数
+
+JS 文件导出函数，可访问 req/res 对象：
+
+```javascript
+module.exports = async (req, res) => {
+  // 获取查询参数
+  const { page, size } = req.query;
+  
+  // 获取请求体
+  const body = req.body;
+  
+  // 自定义响应头
+  res.setHeader('X-Custom-Header', 'mock');
+  
+  return {
+    code: 0,
+    data: { page, size }
+  };
+};
+```
+
+## 🔧 打包发布流程
+
+### 1. 发布到 npm
+
+```bash
+# 1. 登录 npm
+npm login
+
+# 2. 检查 package.json 配置
+# - name: 包名（需唯一）
+# - version: 语义化版本号
+# - main: 入口文件
+
+# 3. 发布
+npm publish
+
+# 发布私有包
+npm publish --access public
+```
+
+### 2. 版本管理
+
+```bash
+# 补丁版本更新 (1.0.0 -> 1.0.1)
+npm version patch
+
+# 次版本更新 (1.0.0 -> 1.1.0)
+npm version minor
+
+# 主版本更新 (1.0.0 -> 2.0.0)
+npm version major
+```
+
+### 3. 本地测试
+
+```bash
+# 在插件目录
+npm link
+
+# 在测试项目
+npm link webpack-mock-switch-plugin
+```
+
+## ❓ 常见问题
+
+### Q: 为什么切换环境后需要刷新页面？
+A: 已发出的请求不会改变，新请求会走新环境。建议切换后刷新页面确保一致性。
+
+### Q: Mock 热更新不生效？
+A: 检查 `hotReload: true`，确保 Mock 文件在配置的 `mockDir` 目录下。
+
+### Q: 如何处理 body 参数？
+A: 需在 devServer 中配置 `devMiddleware: { writeToDisk: true }` 或添加 body-parser 中间件。
+
+### Q: 支持 RESTful 动态路由吗？
+A: 目前支持精确匹配，动态路由建议使用 JS Mock 函数处理。
+
+## 📝 更新日志
+
+### v1.0.0 (2024-06-15)
+- ✅ 首次发布
+- ✅ 浏览器端环境切换面板
+- ✅ Mock 数据热更新
+- ✅ 真实接口自动记录
+- ✅ 一键保存为 Mock 文件
+- ✅ 自动路径匹配
+
+## 🤝 贡献
+
+欢迎提交 Issue 和 Pull Request！
+
+## 📄 License
+
+MIT © Webpack Mock Switch Team

package/dist/index.js

@@ -0,0 +1 @@
+(()=>{var e={497(e,t,o){const n=o(928),r=o(896),s=o(231);let i=null;const a="__MOCK_SWITCH_INSTANCE__";function c(){return global[a]||(global[a]={currentEnv:"mock"}),global[a]}class d{constructor(e={}){var t,o,r,s,i,a;const d=e.environments||{},p={};p.mock={name:"🟢 "+((null===(t=d.mock)||void 0===t?void 0:t.name)||"Mock环境"),target:(null===(o=d.mock)||void 0===o?void 0:o.target)??null},p.dev={name:"🟡 "+((null===(r=d.dev)||void 0===r?void 0:r.name)||"开发环境"),target:(null===(s=d.dev)||void 0===s?void 0:s.target)??"http://localhost:3000"},p.prod={name:"🔴 "+((null===(i=d.prod)||void 0===i?void 0:i.name)||"生产环境"),target:(null===(a=d.prod)||void 0===a?void 0:a.target)??"https://api.example.com"},this.options={mockDir:n.resolve(process.cwd(),"./mock"),apiPrefix:"/api",environments:p,hotReload:!0,autoRegisterMiddleware:!0,...e,environments:p};const m=c();this.currentEnv=m.currentEnv,this.watcher=null,console.log("%s","\n╔══════════════════════════════════════════════════════════════╗\n║                    Webpack Mock Switch                       ║\n║                                                              ║\n║           Development API Mock & Proxy Management            ║\n║               One-Click Environment Switching                ║\n║                                                              ║\n╚══════════════════════════════════════════════════════════════╝\n")}apply(e){const{webpack:t}=e,{RawSource:o}=t.sources;this.ensureMockDir(),e.hooks.emit.tap("MockSwitchWebpackPlugin",t=>{if("development"!==e.options.mode)return;const n=this.generateClientCode();for(const[e,r]of Object.entries(t.assets))if(e.endsWith(".js")&&!e.includes(".hot-update"))try{const s=r.source()+"\n;"+n;t.assets[e]=new o(s)}catch(e){}}),this.options.autoRegisterMiddleware&&e.hooks.afterEnvironment.tap("MockSwitchWebpackPlugin",()=>{e.options.devServer||(e.options.devServer={});const t=e.options.devServer;t.historyApiFallback||(t.historyApiFallback={}),"object"==typeof t.historyApiFallback&&(t.historyApiFallback.rewrites=t.historyApiFallback.rewrites||[],t.historyApiFallback.rewrites.unshift({from:/^\/(__mock_switch__|api)\//,to:e=>e.parsedUrl.pathname}));const o=this;if("function"!=typeof t.setupMiddlewares&&t.setupMiddlewares)if("function"!=typeof t.onBeforeSetupMiddleware&&t.onBeforeSetupMiddleware)if("function"!=typeof t.before&&t.before)console.log("%s","[Mock Switch] 请使用 createMockMiddleware() 手动注册");else{const e=t.before;t.before=(t,n,r)=>{o.registerRoutesWithBodyParser(t),"function"==typeof e&&e(t,n,r)}}else{const e=t.onBeforeSetupMiddleware;t.onBeforeSetupMiddleware=t=>{o.registerRoutesWithBodyParser(t.app),"function"==typeof e&&e(t)}}else{const e=t.setupMiddlewares;t.setupMiddlewares=(t,n)=>(t.unshift((e,t,n)=>{if(e.path.startsWith("/__mock_switch__"))return o.handleControlApi(e,t,n);if(e.path.startsWith(o.options.apiPrefix))switch(o.setNoCacheHeaders(t),o.currentEnv){case"mock":return o.parseBodyThenMock(e,t,n);case"dev":case"prod":return o.serveProxyRequestDirect(e,t,n);default:return n()}n()}),"function"==typeof e?e(t,n):t)}}),this.options.hotReload&&this.startFileWatcher()}registerRoutesWithBodyParser(e){const t=this;try{const t=o(Object(function(){var e=new Error("Cannot find module 'express'");throw e.code="MODULE_NOT_FOUND",e}()));e.use(t.json({limit:"50mb"})),e.use(t.urlencoded({extended:!0,limit:"50mb"}))}catch(e){console.log("%s","[Mock Switch] 使用内置body解析")}e.options("/__mock_switch__/*",(e,o)=>{t.setNoCacheHeaders(o),o.setHeader("Access-Control-Allow-Origin","*"),o.setHeader("Access-Control-Allow-Methods","GET, POST, OPTIONS"),o.setHeader("Access-Control-Allow-Headers","Content-Type"),o.sendStatus(200)}),e.get("/__mock_switch__/env",(e,o)=>{t.setNoCacheHeaders(o),o.json({currentEnv:t.currentEnv,environments:Object.entries(t.options.environments).map(([e,t])=>({key:e,name:t.name,target:t.target}))})}),e.post("/__mock_switch__/env",(e,o)=>{t.setNoCacheHeaders(o);try{const{env:n}=e.body||{};t.options.environments[n]?(t.currentEnv=n,c().currentEnv=n,o.json({success:!0,currentEnv:t.currentEnv})):o.status(400).json({success:!1,error:"无效环境"})}catch(e){o.status(400).json({success:!1,error:e.message})}}),e.all(`${t.options.apiPrefix}/*`,(e,o,n)=>{switch(t.setNoCacheHeaders(o),t.currentEnv){case"mock":t.serveMockFile(e,o,n);break;case"dev":case"prod":t.serveProxyRequest(e,o,n);break;default:n()}})}handleControlApi(e,t,o){const n=this;if(n.setNoCacheHeaders(t),t.setHeader("Access-Control-Allow-Origin","*"),t.setHeader("Access-Control-Allow-Methods","GET, POST, OPTIONS"),t.setHeader("Access-Control-Allow-Headers","Content-Type"),"OPTIONS"===e.method)return t.sendStatus(200);if("/__mock_switch__/env"===e.path&&"GET"===e.method)return t.json({currentEnv:n.currentEnv,environments:Object.entries(n.options.environments).map(([e,t])=>({key:e,name:t.name,target:t.target}))});if("/__mock_switch__/env"===e.path&&"POST"===e.method){if(e.body){const{env:o}=e.body;return n.options.environments[o]?(n.currentEnv=o,c().currentEnv=o,t.json({success:!0,currentEnv:n.currentEnv})):t.status(400).json({success:!1,error:"无效环境"})}let o="";return e.on("data",e=>o+=e),void e.on("end",()=>{try{const{env:e}=JSON.parse(o);n.options.environments[e]?(n.currentEnv=e,c().currentEnv=e,t.json({success:!0,currentEnv:n.currentEnv})):t.status(400).json({success:!1,error:"无效环境"})}catch(e){t.status(400).json({success:!1,error:e.message})}})}o()}parseBodyThenMock(e,t,o){const n=this;if(e.body)n.serveMockFile(e,t,o);else if("POST"===e.method||"PUT"===e.method||"PATCH"===e.method){let r="";e.on("data",e=>r+=e),e.on("end",()=>{try{e.body=r?JSON.parse(r):{}}catch(t){e.body={}}n.serveMockFile(e,t,o)})}else e.body={},n.serveMockFile(e,t,o)}serveProxyRequestDirect(e,t,n){const r=this,s=r.options.environments[r.currentEnv];if(!s||!s.target)return n();const{createProxyMiddleware:i}=o(16),a=i({target:s.target,changeOrigin:!0,pathRewrite:{[`^${r.options.apiPrefix}`]:""},onProxyReq:(e,t,o)=>{if(t.body&&Object.keys(t.body).length>0){const o=JSON.stringify(t.body);e.setHeader("Content-Type","application/json"),e.setHeader("Content-Length",Buffer.byteLength(o)),e.write(o)}},onProxyRes:(e,t,o)=>{delete e.headers.etag,delete e.headers["last-modified"]},onError:(e,t,o)=>{o.status(500).json({error:"代理请求失败",message:e.message,target:s.target})}});a(e,t,n)}setNoCacheHeaders(e){e.setHeader("Cache-Control","no-cache, no-store, must-revalidate, max-age=0"),e.setHeader("Pragma","no-cache"),e.setHeader("Expires","0"),e.setHeader("Access-Control-Allow-Origin","*"),e.removeHeader("ETag"),e.removeHeader("Last-Modified")}ensureMockDir(){r.existsSync(this.options.mockDir)||r.mkdirSync(this.options.mockDir,{recursive:!0})}startFileWatcher(){this.watcher||(this.watcher=s.watch(this.options.mockDir,{ignored:/(^|[\/\\])\../,persistent:!0,ignoreInitial:!0}),this.watcher.on("change",e=>{o.c[o(589).resolve(e)]&&delete o.c[o(589).resolve(e)]}))}async serveMockFile(e,t,n){const s=this,i=s.findMockFile(e.path,e.method);if(i&&r.existsSync(i))try{o.c[o(589).resolve(i)]&&delete o.c[o(589).resolve(i)];let n=o(589)(i);"function"==typeof n&&(n=await n(e,t));const r=n._delay||0;return delete n._delay,void setTimeout(()=>{s.setNoCacheHeaders(t),t.setHeader("Content-Type","application/json"),t.json(n)},r)}catch(e){}s.serveProxyRequestDirect(e,t,n)}async serveProxyRequest(e,t,n){const r=this,s=r.options.environments[r.currentEnv];if(!s||!s.target)return n();const{createProxyMiddleware:i}=o(16),a=i({target:s.target,changeOrigin:!0,pathRewrite:{[`^${r.options.apiPrefix}`]:""},onProxyReq:(e,t,o)=>{if(t.body&&Object.keys(t.body).length>0){const o=JSON.stringify(t.body);e.setHeader("Content-Type","application/json"),e.setHeader("Content-Length",Buffer.byteLength(o)),e.write(o)}},onProxyRes:(e,t,o)=>{delete e.headers.etag,delete e.headers["last-modified"]}});a(e,t,n)}findMockFile(e,t){const o=this,s=e.replace(o.options.apiPrefix,""),i=[n.join(o.options.mockDir,`${t.toUpperCase()}${s.replace(/\//g,"_")}.json`),n.join(o.options.mockDir,`${s.replace(/\//g,"_")}.json`),n.join(o.options.mockDir,`${t.toUpperCase()}${s.replace(/\//g,"_")}.js`),n.join(o.options.mockDir,`${s.replace(/\//g,"_")}.js`),n.join(o.options.mockDir,`${s}.json`),n.join(o.options.mockDir,`${s}.js`)];for(const e of i)if(r.existsSync(e))return e;return null}generateClientCode(){return';(function(){if(typeof window!==\'undefined\'&&!window.__MOCK_SWITCH_INITIALIZED__){window.__MOCK_SWITCH_INITIALIZED__=!0;const e=document.createElement("style");e.textContent=".mock-switch-panel{position:fixed!important;right:20px!important;bottom:20px!important;z-index:999999!important;font-family:-apple-system,BlinkMacSystemFont,\'Segoe UI\',sans-serif!important}.mock-switch-btn{width:56px!important;height:56px!important;border-radius:50%!important;background:linear-gradient(135deg,#667eea 0%,#764ba2 100%)!important;border:3px solid white!important;cursor:pointer!important;box-shadow:0 8px 25px rgba(102,126,234,.5)!important;display:flex!important;align-items:center!important;justify-content:center!important;color:white!important;font-size:24px!important;position:relative!important;animation:mockPulse 2s infinite!important}.mock-switch-btn:hover{transform:scale(1.15)!important}@keyframes mockPulse{0%,100%{box-shadow:0 8px 25px rgba(102,126,234,.5)}50%{box-shadow:0 8px 35px rgba(102,126,234,.7)}}.mock-switch-dropdown{position:absolute!important;bottom:70px!important;right:0!important;background:white!important;border-radius:16px!important;box-shadow:0 15px 50px rgba(0,0,0,.25)!important;min-width:260px!important;display:none!important;animation:mockSlideUp .25s ease}.mock-switch-dropdown.show{display:block!important}@keyframes mockSlideUp{from{opacity:0;transform:translateY(20px) scale(.95)}to{opacity:1;transform:translateY(0) scale(1)}}.mock-switch-header{padding:18px 24px!important;background:linear-gradient(135deg,#667eea 0%,#764ba2 100%)!important;color:white!important;font-weight:600!important}.mock-switch-env-item{padding:14px 24px!important;cursor:pointer!important;display:flex!important;align-items:center!important;gap:14px!important;transition:all .2s ease}.mock-switch-env-item:hover{background:#f8f9fa!important}.mock-switch-env-item.active{background:#f0f4ff!important;color:#667eea!important}.mock-switch-env-item.active .dot{background:#667eea!important;box-shadow:0 0 0 4px rgba(102,126,234,.2)!important}.mock-switch-env-item .dot{width:10px!important;height:10px!important;border-radius:50%!important;background:#ddd!important;transition:all .2s ease}.mock-switch-status{position:absolute!important;top:-2px!important;right:-2px!important;width:18px!important;height:18px!important;border-radius:50%!important;border:3px solid white!important}.mock-switch-status.mock{background:#10b981!important}.mock-switch-status.dev{background:#f59e0b!important}.mock-switch-status.prod{background:#ef4444!important}",document.head.appendChild(e);const t=document.createElement("div");t.className="mock-switch-panel",t.innerHTML=\'<button class="mock-switch-btn" id="mockSwitchToggle" title="Mock环境切换">🎭<span class="mock-switch-status mock" id="mockSwitchStatus"></span></button><div class="mock-switch-dropdown" id="mockSwitchDropdown"><div class="mock-switch-header">🎯 环境切换面板</div><div id="mockSwitchEnvList"></div></div>\',document.body.appendChild(t);let n="mock";async function o(){try{const e=await fetch("/__mock_switch__/env?t="+Date.now(),{cache:"no-store"}),t=await e.json();n=t.currentEnv,i(t.environments),s()}catch(e){}}function i(e){const t=document.getElementById("mockSwitchEnvList");t.innerHTML=e.map(e=>\'<div class="mock-switch-env-item \'+(e.key===n?"active":"")+\'" data-env="\'+e.key+\'"><span class="dot"></span><span>\'+e.name+"</span></div>").join(""),t.querySelectorAll(".mock-switch-env-item").forEach(t=>{t.addEventListener("click",()=>c(t.dataset.env))})}async function c(e){try{await fetch("/__mock_switch__/env",{method:"POST",headers:{"Content-Type":"application/json"},body:JSON.stringify({env:e})}),n=e,s(),o()}catch(e){}}function s(){const e=document.getElementById("mockSwitchStatus");e.className="mock-switch-status "+n}document.getElementById("mockSwitchToggle").addEventListener("click",e=>{e.stopPropagation();document.getElementById("mockSwitchDropdown").classList.toggle("show")}),document.addEventListener("click",()=>{document.getElementById("mockSwitchDropdown").classList.remove("show")}),document.getElementById("mockSwitchDropdown").addEventListener("click",e=>{e.stopPropagation()}),o()}})();'}}e.exports=d,e.exports.default=d,e.exports.createMockMiddleware=function(e,t={}){return i||(i=new d({...t,autoRegisterMiddleware:!1,hotReload:!0}),i.registerRoutesWithBodyParser(e),i)}},589(e){function t(e){var t=new Error("Cannot find module '"+e+"'");throw t.code="MODULE_NOT_FOUND",t}t.keys=()=>[],t.resolve=t,t.id=589,e.exports=t},231(e){"use strict";e.exports=require("chokidar")},16(e){"use strict";e.exports=require("http-proxy-middleware")},896(e){"use strict";e.exports=require("fs")},928(e){"use strict";e.exports=require("path")}},t={};function o(n){var r=t[n];if(void 0!==r)return r.exports;var s=t[n]={id:n,loaded:!1,exports:{}};return e[n](s,s.exports,o),s.loaded=!0,s.exports}o.c=t,o.o=(e,t)=>Object.prototype.hasOwnProperty.call(e,t);var n=o(497);module.exports=n})();

package/package.json

@@ -0,0 +1,49 @@
+{
+  "name": "mock-switch-webpack-plugin",
+  "version": "1.0.0",
+  "description": "前端Mock神器！浏览器端一键切换Mock/开发/生产环境的Webpack插件，支持接口代理、Mock数据热更新、POST请求自动转发等特性，零配置接入React/Vue等所有Webpack项目，彻底告别手动修改代码切换环境的低效开发方式",
+  "main": "dist/index.js",
+  "scripts": {
+    "build": "webpack --mode production",
+    "prepublishOnly": "npm run build"
+  },
+  "keywords": [
+    "环境切换",
+    "mock-switch",
+    "mock",
+    "接口模拟",
+    "proxy",
+    "hot-mock",
+    "前端接口代理",
+    "Mock一键切换",
+    "webpack-mock",
+    "env-switch",
+    "Mock热更新",
+    "前端Mock神器"
+  ],
+  "author": "lebron_shi",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/shilimingY/mock-switch-webpack-plugin.git"
+  },
+  "engines": {
+    "node": ">=14.0.0"
+  },
+  "peerDependencies": {
+    "webpack": ">=5.0.0"
+  },
+  "dependencies": {
+    "chokidar": "^3.6.0",
+    "http-proxy-middleware": "^2.0.6"
+  },
+  "devDependencies": {
+    "@babel/core": "^7.24.0",
+    "@babel/preset-env": "^7.24.0",
+    "babel-loader": "^9.1.3",
+    "webpack": "^5.90.0",
+    "webpack-cli": "^5.1.4",
+    "webpack-node-externals": "^3.0.0"
+  },
+  "files": ["dist/"]
+}