warehouse-mock 1.0.0

package/README.md

@@ -0,0 +1,207 @@
+# warehouse-mock
+
+一个专为 Vue 2 项目设计的 Webpack 插件，支持 RPC 风格接口 mock，零业务代码侵入，实时更新。
+
+[![npm version](https://img.shields.io/npm/v/warehouse-mock.svg)](https://www.npmjs.com/package/warehouse-mock)
+[![license](https://img.shields.io/npm/l/warehouse-mock.svg)](https://github.com/CodeMomentYY/warehouse-mock/blob/main/LICENSE)
+
+## ✨ 特性
+
+- ✅ **RPC 风格接口支持**: 完美支持 `/api?user.account.getInfo` 格式
+- ✅ **零业务代码侵入**: 只需修改配置文件，无需改动业务逻辑
+- ✅ **实时更新**: 修改 Mock 数据后刷新页面即可，无需重启服务
+- ✅ **按需 Mock**: 只拦截配置了 Mock 数据的接口，其他接口不受影响
+- ✅ **TypeScript 编写**: 类型安全，易于维护
+- ✅ **兼容性强**: 支持 Webpack 4/5，Vue CLI 3/4/5
+
+## 📦 安装
+
+```bash
+npm install warehouse-mock --save-dev
+```
+
+## 🚀 快速开始
+
+### 1. 配置 vue.config.js
+
+```javascript
+const WarehouseMockPlugin = require('warehouse-mock');
+const webpack = require('webpack');
+const path = require('path');
+
+const isMock = process.env.MOCK === 'true';
+const mockPlugin = isMock ? new WarehouseMockPlugin({
+  mockPath: path.resolve(__dirname, 'warehouseMock'),
+}) : null;
+
+module.exports = {
+  configureWebpack: config => {
+    if (isMock && mockPlugin) {
+      config.plugins.push(
+        new webpack.DefinePlugin({
+          'process.env.VUE_APP_MOCK': JSON.stringify('true'),
+        })
+      );
+      config.plugins.push(mockPlugin);
+    }
+  },
+  
+  devServer: {
+    // Vue CLI 5.x (Webpack 5)
+    setupMiddlewares: (middlewares, devServer) => {
+      if (isMock && mockPlugin) {
+        return mockPlugin.setupMiddlewares(middlewares, devServer);
+      }
+      return middlewares;
+    },
+    
+    // Vue CLI 3.x/4.x (Webpack 4) 使用这个：
+    // before: isMock && mockPlugin ? (app) => mockPlugin.runBefore(app) : undefined,
+  }
+};
+```
+
+### 2. 修改 API 配置
+
+在 `src/const/config.js` 中添加 Mock 模式判断：
+
+```javascript
+const config = { env: process.env.VUE_APP_ENV || 'dev' };
+
+// Mock 模式优先判断
+if (process.env.VUE_APP_MOCK === 'true') {
+  Object.assign(config, {
+    API: '/mock-api',
+  });
+} else if (config.env === 'dev') {
+  Object.assign(config, {
+    API: 'https://fat-api.hellobike.com/api',
+  });
+}
+
+export default config;
+```
+
+### 3. 添加 Mock 脚本
+
+在 `package.json` 中：
+
+```json
+{
+  "scripts": {
+    "mock": "MOCK=true vue-cli-service serve"
+  }
+}
+```
+
+### 4. 创建 Mock 数据
+
+创建 `warehouseMock` 目录并添加 Mock 数据文件：
+
+**warehouseMock/user.account.getInfo.json**:
+```json
+{
+  "code": 0,
+  "msg": "success",
+  "data": {
+    "userId": 12345,
+    "userName": "Mock 测试用户"
+  }
+}
+```
+
+### 5. 启动
+
+```bash
+npm run mock
+```
+
+## ⚙️ 配置选项
+
+```typescript
+new WarehouseMockPlugin({
+  // 必填：Mock 数据存放目录
+  mockPath: string;
+  
+  // 可选：需要拦截的 API 路径前缀，默认 ['/api', '/mock-api']
+  apiPrefixes?: string[];
+  
+  // 可选：本地 API 路径前缀，默认 '/mock-api'
+  localApiPrefix?: string;
+})
+```
+
+## 📝 Mock 文件命名规则
+
+### RPC 风格（推荐）
+
+| 请求 URL | Mock 文件名 |
+|---------|-----------|
+| `/api?user.account.getInfo` | `user.account.getInfo.json` |
+| `/api?user.taurus.pointInfo` | `user.taurus.pointInfo.json` |
+| `/api?common.welfare.banner.query` | `common.welfare.banner.query.json` |
+
+### RESTful 风格
+
+| 请求 URL | Mock 文件名（二选一） |
+|---------|---------------------|
+| `/api/user/info` | `api_user_info.json` (扁平化) |
+| `/api/user/info` | `api/user/info.json` (嵌套) |
+
+## 🔍 调试工具
+
+### 查看可用 Mock 列表
+
+访问: `http://localhost:8080/__mock_list__`
+
+### 直接访问 Mock 数据
+
+访问: `http://localhost:8080/mock-api?user.account.getInfo`
+
+## 💡 为什么选择 warehouse-mock？
+
+### 适用场景
+
+- ✅ 后端接口未就绪，需要前端先行开发
+- ✅ 后端接口不稳定，需要本地 Mock 数据测试
+- ✅ 需要模拟特殊场景（错误、超时、边界数据等）
+- ✅ 使用 RPC 风格接口的项目（如 hellobike）
+
+### 对比其他方案
+
+| 方案 | warehouse-mock | Mock.js | json-server |
+|-----|---------------|---------|-------------|
+| 零代码侵入 | ✅ | ❌ 需修改业务代码 | ❌ 需单独启动服务 |
+| RPC 支持 | ✅ | ❌ | ❌ |
+| 实时更新 | ✅ | ❌ | ✅ |
+| TypeScript | ✅ | ❌ | ❌ |
+| Webpack 集成 | ✅ | ❌ | ❌ |
+
+## 📚 完整示例
+
+查看完整的示例项目：[example-vue2](https://github.com/CodeMomentYY/warehouse-mock/tree/main/packages/example-vue2)
+
+## ❓ 常见问题
+
+**Q: Mock 没有生效？**
+
+确保在 `src/const/config.js` 中添加了 Mock 模式判断，将 API 地址改为 `/mock-api`。
+
+**Q: 修改 Mock 数据后需要重启服务吗？**
+
+不需要！直接刷新浏览器页面即可。
+
+**Q: 可以只 Mock 部分接口吗？**
+
+可以！只有存在对应 JSON 文件的接口才会使用 Mock 数据。
+
+## 📄 许可证
+
+MIT © CodeMomentYY
+
+## 🔗 相关链接
+
+- [GitHub 仓库](https://github.com/CodeMomentYY/warehouse-mock)
+- [问题反馈](https://github.com/CodeMomentYY/warehouse-mock/issues)
+- [更新日志](https://github.com/CodeMomentYY/warehouse-mock/releases)
+

package/dist/index.d.ts

@@ -0,0 +1,33 @@
+import { Compiler } from 'webpack';
+interface MockPluginOptions {
+    mockPath: string;
+    apiPrefixes?: string[];
+    localApiPrefix?: string;
+}
+declare class WarehouseMockPlugin {
+    private options;
+    private resolvedMockPath;
+    constructor(options: MockPluginOptions);
+    /**
+     * 实时扫描 mock 目录，获取所有 mock 文件名列表
+     */
+    getMockFileList(): string[];
+    /**
+     * 获取本地代理路径前缀
+     */
+    getLocalApiPrefix(): string;
+    apply(compiler: Compiler): void;
+    /**
+     * 公共方法：设置中间件 (Webpack 5 / Vue CLI 5+)
+     */
+    setupMiddlewares(middlewares: any[], devServer: any, originalSetupMiddlewares?: Function): any;
+    /**
+     * 公共方法：设置中间件 (Webpack 4 / Vue CLI 3-4)
+     */
+    runBefore(app: any, server?: any, compiler?: any, originalBefore?: Function): void;
+    private getResolvedMockPath;
+    private ensureMockDirectory;
+    private createDemoFile;
+    private handleRequest;
+}
+export = WarehouseMockPlugin;

package/dist/index.js

@@ -0,0 +1,244 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+const fs_1 = __importDefault(require("fs"));
+const path_1 = __importDefault(require("path"));
+const chalk_1 = __importDefault(require("chalk"));
+class WarehouseMockPlugin {
+    constructor(options) {
+        this.resolvedMockPath = '';
+        this.options = Object.assign({ apiPrefixes: ['/api', '/mock-api'], localApiPrefix: '/mock-api' }, options);
+    }
+    /**
+     * 实时扫描 mock 目录，获取所有 mock 文件名列表
+     */
+    getMockFileList() {
+        const mockPath = this.getResolvedMockPath();
+        const fileList = [];
+        if (fs_1.default.existsSync(mockPath)) {
+            const files = fs_1.default.readdirSync(mockPath);
+            files.forEach((file) => {
+                if (file.endsWith('.json')) {
+                    fileList.push(file.replace(/\.json$/, ''));
+                }
+            });
+        }
+        return fileList;
+    }
+    /**
+     * 获取本地代理路径前缀
+     */
+    getLocalApiPrefix() {
+        return this.options.localApiPrefix || '/mock-api';
+    }
+    apply(compiler) {
+        this.resolvedMockPath = path_1.default.resolve(compiler.context, this.options.mockPath);
+        // 确保 mock 目录存在
+        if (!fs_1.default.existsSync(this.resolvedMockPath)) {
+            try {
+                fs_1.default.mkdirSync(this.resolvedMockPath, { recursive: true });
+                console.log(chalk_1.default.green(`[WarehouseMock] Mock 目录已创建: ${this.resolvedMockPath}`));
+                this.createDemoFile(this.resolvedMockPath);
+            }
+            catch (err) {
+                console.error(chalk_1.default.red(`[WarehouseMock] 创建 Mock 目录失败: ${err}`));
+            }
+        }
+        const mockFileList = this.getMockFileList();
+        console.log(chalk_1.default.cyan(`[WarehouseMock] 已加载 ${mockFileList.length} 个 mock 文件: ${mockFileList.join(', ')}`));
+        const devServerOptions = compiler.options.devServer || {};
+        const originalSetupMiddlewares = devServerOptions.setupMiddlewares;
+        if (!compiler.options.devServer) {
+            compiler.options.devServer = {};
+        }
+        // 适用于 Webpack 5 (setupMiddlewares)
+        compiler.options.devServer.setupMiddlewares = (middlewares, devServer) => {
+            return this.setupMiddlewares(middlewares, devServer, originalSetupMiddlewares);
+        };
+        // 适用于 Webpack 4 (before)
+        const originalBefore = devServerOptions.before;
+        compiler.options.devServer.before = (app, server, compilerArg) => {
+            this.runBefore(app, server, compilerArg, originalBefore);
+        };
+    }
+    /**
+     * 公共方法：设置中间件 (Webpack 5 / Vue CLI 5+)
+     */
+    setupMiddlewares(middlewares, devServer, originalSetupMiddlewares) {
+        console.log(chalk_1.default.cyan('[WarehouseMock] Mock 服务已启动'));
+        const mockPath = this.getResolvedMockPath();
+        this.ensureMockDirectory(mockPath);
+        middlewares.unshift({
+            name: 'warehouse-mock',
+            middleware: (req, res, next) => this.handleRequest(req, res, next, mockPath),
+        });
+        if (originalSetupMiddlewares) {
+            return originalSetupMiddlewares(middlewares, devServer);
+        }
+        return middlewares;
+    }
+    /**
+     * 公共方法：设置中间件 (Webpack 4 / Vue CLI 3-4)
+     */
+    runBefore(app, server, compiler, originalBefore) {
+        console.log(chalk_1.default.cyan('[WarehouseMock] Mock 服务已启动 (before hook)'));
+        const mockPath = this.getResolvedMockPath();
+        this.ensureMockDirectory(mockPath);
+        app.use((req, res, next) => this.handleRequest(req, res, next, mockPath));
+        if (originalBefore) {
+            originalBefore(app, server, compiler);
+        }
+    }
+    getResolvedMockPath() {
+        if (this.resolvedMockPath) {
+            return this.resolvedMockPath;
+        }
+        return path_1.default.isAbsolute(this.options.mockPath)
+            ? this.options.mockPath
+            : path_1.default.resolve(process.cwd(), this.options.mockPath);
+    }
+    ensureMockDirectory(mockPath) {
+        if (!fs_1.default.existsSync(mockPath)) {
+            try {
+                fs_1.default.mkdirSync(mockPath, { recursive: true });
+                console.log(chalk_1.default.green(`[WarehouseMock] Mock 目录已创建: ${mockPath}`));
+                this.createDemoFile(mockPath);
+            }
+            catch (err) {
+                console.error(chalk_1.default.red(`[WarehouseMock] 创建 Mock 目录失败: ${err}`));
+            }
+        }
+    }
+    createDemoFile(mockPath) {
+        const demoFilePath = path_1.default.join(mockPath, 'demo.json');
+        const demoContent = {
+            code: 0,
+            msg: 'success',
+            data: {
+                message: '这是自动生成的 demo 数据',
+                id: 1,
+                name: 'Demo User',
+                description: 'Warehouse Mock 自动创建的示例文件',
+            },
+        };
+        try {
+            fs_1.default.writeFileSync(demoFilePath, JSON.stringify(demoContent, null, 2));
+            console.log(chalk_1.default.green(`[WarehouseMock] 已创建示例 Mock 文件: ${demoFilePath}`));
+        }
+        catch (e) {
+            console.error(chalk_1.default.yellow(`[WarehouseMock] 创建示例文件失败: ${e}`));
+        }
+    }
+    handleRequest(req, res, next, mockPath) {
+        var _a, _b;
+        const url = req.path || ((_a = req.url) === null || _a === void 0 ? void 0 : _a.split('?')[0]);
+        if (!url) {
+            return next();
+        }
+        // ============ 特殊端点：实时返回 mock 文件列表 ============
+        if (url === '/__mock_list__') {
+            const fileList = this.getMockFileList();
+            res.setHeader('Content-Type', 'application/json');
+            res.setHeader('Cache-Control', 'no-cache, no-store, must-revalidate');
+            res.end(JSON.stringify({
+                mockList: fileList,
+                localApiPrefix: this.getLocalApiPrefix(),
+            }));
+            return;
+        }
+        // 安全检查：防止目录遍历
+        if (url.includes('..')) {
+            return next();
+        }
+        // 检查是否在允许的 API 前缀范围内
+        const { apiPrefixes } = this.options;
+        const isApiRequest = (_b = apiPrefixes === null || apiPrefixes === void 0 ? void 0 : apiPrefixes.some((prefix) => url.startsWith(prefix))) !== null && _b !== void 0 ? _b : true;
+        if (!isApiRequest) {
+            return next();
+        }
+        let filePath = '';
+        let matched = false;
+        let matchedName = '';
+        // 1. 优先尝试 Query String 匹配 (RPC 风格接口，如 /api?user.taurus.pointInfo)
+        if (req.url && req.url.includes('?')) {
+            const queryPart = req.url.split('?')[1];
+            if (queryPart) {
+                const params = new URLSearchParams(queryPart);
+                for (const key of params.keys()) {
+                    // 尝试匹配 key.json (例如 user.taurus.pointInfo.json)
+                    const queryFilePath = path_1.default.join(mockPath, `${key}.json`);
+                    if (fs_1.default.existsSync(queryFilePath) && fs_1.default.statSync(queryFilePath).isFile()) {
+                        filePath = queryFilePath;
+                        matchedName = key;
+                        matched = true;
+                        break;
+                    }
+                    // 也尝试匹配 value (例如 method=user.taurus.pointInfo)
+                    const value = params.get(key);
+                    if (value) {
+                        const valueFilePath = path_1.default.join(mockPath, `${value}.json`);
+                        if (fs_1.default.existsSync(valueFilePath) && fs_1.default.statSync(valueFilePath).isFile()) {
+                            filePath = valueFilePath;
+                            matchedName = value;
+                            matched = true;
+                            break;
+                        }
+                    }
+                }
+            }
+        }
+        // 2. 尝试扁平化命名 (将路径中的 / 替换为 _)
+        if (!matched) {
+            const flatName = url.replace(/^\//, '').replace(/\//g, '_') || 'index';
+            const flatFilePath = path_1.default.join(mockPath, `${flatName}.json`);
+            if (fs_1.default.existsSync(flatFilePath) && fs_1.default.statSync(flatFilePath).isFile()) {
+                filePath = flatFilePath;
+                matchedName = flatName;
+                matched = true;
+            }
+        }
+        // 3. 尝试嵌套目录结构匹配 (向后兼容)
+        if (!matched) {
+            const nestedFilePath = path_1.default.join(mockPath, url + '.json');
+            if (fs_1.default.existsSync(nestedFilePath) && fs_1.default.statSync(nestedFilePath).isFile()) {
+                filePath = nestedFilePath;
+                matchedName = url;
+                matched = true;
+            }
+            else {
+                const indexFilePath = path_1.default.join(mockPath, url, 'index.json');
+                if (fs_1.default.existsSync(indexFilePath) && fs_1.default.statSync(indexFilePath).isFile()) {
+                    filePath = indexFilePath;
+                    matchedName = url + '/index';
+                    matched = true;
+                }
+            }
+        }
+        if (matched) {
+            console.log(chalk_1.default.green(`[WarehouseMock] 拦截: ${matchedName} -> ${path_1.default.basename(filePath)}`));
+            try {
+                const data = fs_1.default.readFileSync(filePath, 'utf-8');
+                try {
+                    const jsonData = JSON.parse(data);
+                    res.setHeader('Content-Type', 'application/json');
+                    res.end(JSON.stringify(jsonData));
+                }
+                catch (jsonErr) {
+                    console.warn(chalk_1.default.yellow(`[WarehouseMock] 无效的 JSON 文件: ${filePath}`));
+                    res.setHeader('Content-Type', 'text/plain');
+                    res.end(data);
+                }
+                return;
+            }
+            catch (e) {
+                console.error(chalk_1.default.red(`[WarehouseMock] 读取 Mock 文件失败: ${e}`));
+                res.statusCode = 500;
+                res.end('Mock Read Error');
+                return;
+            }
+        }
+        next();
+    }
+}
+module.exports = WarehouseMockPlugin;

package/package.json

@@ -0,0 +1,56 @@
+{
+  "name": "warehouse-mock",
+  "version": "1.0.0",
+  "description": "一个专为 Vue 2 项目设计的 Webpack 插件，支持 RPC 风格接口 mock，零业务代码侵入，实时更新",
+  "main": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "files": [
+    "dist",
+    "README.md"
+  ],
+  "scripts": {
+    "build": "tsc",
+    "prepublishOnly": "npm run build"
+  },
+  "keywords": [
+    "webpack",
+    "plugin",
+    "mock",
+    "vue",
+    "rpc",
+    "api",
+    "typescript",
+    "dev-server",
+    "hellobike"
+  ],
+  "author": "CodeMomentYY",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/CodeMomentYY/warehouse-mock.git",
+    "directory": "packages/mock-webpack-plugin"
+  },
+  "bugs": {
+    "url": "https://github.com/CodeMomentYY/warehouse-mock/issues"
+  },
+  "homepage": "https://github.com/CodeMomentYY/warehouse-mock#readme",
+  "dependencies": {
+    "chalk": "^4.1.2",
+    "chokidar": "^3.5.3"
+  },
+  "devDependencies": {
+    "typescript": "^5.0.0",
+    "webpack": "^5.0.0",
+    "webpack-dev-server": "^4.0.0",
+    "@types/webpack": "^5.0.0",
+    "@types/webpack-dev-server": "^4.0.0",
+    "@types/node": "^18.0.0"
+  },
+  "peerDependencies": {
+    "webpack": "^4.0.0 || ^5.0.0"
+  },
+  "engines": {
+    "node": ">=12.0.0"
+  }
+}
+