vite-plugin-mock-dev-server 0.1.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2021-2022 pengzhanbo
+
+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,359 @@
+# vite-plugin-mock-dev-server
+
+vite mock开发服务（mock-dev-server）插件。
+
+在 vite 开发环境中，注入一个 mock-dev-server。
+
+## 特性
+
+- ⚡️ 轻量，灵活，快速
+- 🧲 非注入式，对客户端代码无侵入
+- 🦾 Typescript
+- 📦 自动加载 mock 文件
+- 🎨 可选择你喜欢的任意用于生成mock数据库，如 `mockjs`，或者不是用其他库
+- 📥 路径规则匹配，请求参数匹配
+- ⚙️ 随意开启或关闭对某个接口的 mock配置
+- 🔥 热更新
+- ⚖️ 使用 `server.proxy` 配置
+
+
+## 使用
+
+### 安装
+
+```sh
+# npm
+npm i -D vite-plugin-mock-dev-server
+# yarn 
+yarn add vite-plugin-mock-dev-server
+# pnpm
+pnpm add -D vite-plugin-mock-dev-server
+```
+
+### 配置
+
+`vite.config.ts`
+```ts
+import { defineConfig } from 'vite'
+import mockDevServerPlugin from 'vite-plugin-mock-dev-server'
+
+export default defineConfig({
+  plugins: [
+    mockDevServerPlugin(),
+  ],
+  server: {
+    proxy: {
+      '^/api': {
+        target: 'http://example.com'
+      }
+    }
+  }
+})
+```
+插件会读取 `server.proxy` 的配置， 仅对设置了代理的 url 匹配，启用
+mock 匹配。
+
+> 因为一般场景下，我们只需要对有代理的url进行mock，这样才能通过 vite 提供的 http 服务进行 代理和 mock
+
+### 编写mock文件
+
+默认配置，在你的项目根目录的 `mock` 目录中编写mock数据：
+
+`mock/api.mock.ts` :
+```ts
+import { defineMock } from 'vite-plugin-mock-dev-server'
+
+export default defineMock({
+  url: '/api/test',
+  body: {
+    a: 1,
+    b: 2,
+  }
+})
+```
+
+## 方法
+
+### mockDevServerPlugin(options)
+
+vite plugin
+
+
+`vite.config.ts`
+```ts
+import { defineConfig } from 'vite'
+import mockDevServerPlugin from 'vite-plugin-mock-dev-server'
+
+export default defineConfig({
+  plugins: [
+    mockDevServerPlugin(),
+  ]
+})
+```
+
+#### options
+
+- `option.include` 
+  
+  配置读取 mock文件，可以是一个 目录，glob，或者一个数组
+
+  默认值： `['mock/**/*.mock.*']` (相对于根目录)
+
+
+### defineMock(config)
+
+mock 配置帮助函数，提供类型检查帮助
+
+```ts
+import { defineMock } from 'vite-plugin-mock-dev-server'
+
+export default defineMock({
+  url: '/api/test',
+  body: {}
+})
+```
+
+## Mock 配置
+
+```ts
+export default defineMock({
+  /**
+   * 请求地址，支持 `/api/user/:id` 格式 
+   */
+  url: '/api/test',
+  /**
+   * 接口支持的请求方法
+   * 
+   * @type string | string[]
+   * @default ['POST','GET']
+   * 
+   */
+  method: ['GET', 'POST'],
+  /**
+   * 是否启用当前 mock请求
+   * 
+   * 在实际场景中，我们一般只需要某几个mock接口生效，
+   * 而不是所以mock接口都启用。
+   * 对当前不需要mock的接口，可设置为 false
+   * 
+   * @default true
+   */
+  enable: true,
+  /**
+   * 设置接口响应延迟， 单位：ms
+   * 
+   * @default 0
+   */
+  delay: 1000,
+  /**
+   * 响应状态码
+   * 
+   * @default 200
+   */
+  status: 200,
+  /**
+   * 响应状态文本
+   */
+  statusText: 'OK',
+  /**
+   * 请求验证器，通过验证器则返回 mock数据，否则不是用当前mock。
+   * 这对于一些场景中，某个接口需要通过不同的入参来返回不同的数据，
+   * 验证器可以很好的解决这一类问题，将同个 url 分为多个 mock配置，
+   * 根据 验证器来判断哪个mock配置生效。
+   * 
+   * @type { header?: object; body?: object; query?: object; params?: object  }
+   * 
+   * 如果 validator 传入的是一个对象，那么验证方式是严格比较 请求的接口
+   * 中，headers/body/query/params 的各个`key`的`value`是否全等，
+   * 全等则校验通过
+   * 
+   * @type ({ header: object; body: object; query: object; params: object }) => boolean
+   * 如果 validator 传入的是一个函数，那么会讲 请求的接口相关数据作为入参，提供给使用者进行自定义校验，并返回一个 boolean
+   * 
+   */
+  validator: {
+    headers: {},
+    body: {},
+    query: {},
+    params: {},
+  },
+  /**
+   * 
+   * 响应状态 headers
+   * 
+   * @type Record<string, any>
+   * 
+   * @type (({ query, body, params, headers }) => Record<string, any>)
+   * 入参部分为 请求相关信息
+   */
+  headers: {
+    'Content-Type': 'application/json'
+  },
+
+  /**
+   * 响应体数据
+   * 定义返回的响应体数据内容。
+   * 在这里，你可以直接返回JavaScript支持的数据类型如 `string/number/array/object` 等
+   * 同时，你也可以使用如 `mockjs` 等库来生成数据内容
+   * 
+   * @type string | number | array | object
+   *  直接返回定义的数据
+   * 
+   * @type (request: { header, query, body, params }) => any | Promise<any>
+   * 如果传入一个函数，那么可以更加灵活的定义返回响应体数据
+   */
+  body: {},
+
+  /**
+   * 如果通过 body 配置不能解决mock需求，
+   * 那么可以通过 配置 response，暴露http server 的接口，
+   * 实现完全可控的自定义配置
+   * 
+   * 在 req参数中，已内置了 query、body、params 的解析，
+   * 你可以直接使用它们
+   * 
+   * 别忘了，需要通过 `res.end()` 返回响应体数据，
+   * 或者需要跳过mock，那么别忘了调用 `next()`
+   */
+  response(req, res, next) {
+    res.end()
+  }
+})
+
+```
+
+`mock/**/*.mock.ts`
+
+#### 示例1：
+命中 `/api/test` 请求，并返回一个 数据为空的响应体内容
+```ts
+export default defineMock({
+  url: '/api/test',
+})
+```
+
+#### 示例2：
+命中 `/api/test` 请求，并返回一个固定内容数据
+```ts
+export default defineMock({
+  url: '/api/test',
+  body: {
+    a: 1
+  }
+})
+```
+
+#### 示例3：
+限定只允许 `GET` 请求
+```ts
+export default defineMock({
+  url: '/api/test',
+  method: 'GET'
+})
+```
+
+#### 示例4：
+在返回的响应头中，添加自定义header
+```ts
+export default defineMock({
+  url: '/api/test',
+  headers: {
+    'X-Custom': '12345678'
+  }
+})
+```
+```ts
+export default defineMock({
+  url: '/api/test',
+  headers({ query, body, params, headers }) {
+    return {
+      'X-Custom': query.custom
+    }
+  }
+})
+```
+
+#### 示例5：
+定义多个相同url请求mock，并使用验证器匹配生效规则
+```ts
+export default defineMock([
+  // 命中 /api/test?a=1
+  {
+    url: '/api/test',
+    validator: {
+      query: {
+        a: 1
+      }
+    },
+    body: {
+      message: 'query.a === 1'
+    }
+  },
+  // 命中 /api/test?a=2
+  {
+    url: '/api/test',
+    validator: {
+      query: {
+        a: 2
+      }
+    },
+    body: {
+      message: 'query.a === 2'
+    }
+  }
+])
+```
+
+#### 示例6：
+延迟接口响应：
+```ts
+export default defineMock({
+  url: '/api/test',
+  delay: 6000, // 延迟 6秒
+})
+```
+
+#### 示例7：
+使接口请求失败
+```ts
+export default defineMock({
+  url: '/api/test',
+  status: 504,
+  statusText: 'Bad Gateway'
+})
+```
+
+#### 示例8：
+使用 `mockjs` 生成响应数据:
+```ts
+import Mock from 'mockjs'
+export default defineMock({
+  url: '/api/test',
+  body: Mock.mock({
+    'list|1-10': [{
+      'id|+1': 1
+    }]
+  })
+})
+```
+请先安装 `mockjs`
+
+### 示例9：
+使用 `response` 自定义响应
+```ts
+export default defineMock({
+  url: '/api/test',
+  response(req, res, next) {
+    const { query, body, params, headers } = req
+    console.log(query, body, params, headers)
+
+    res.status = 200
+    res.setHeader('Content-Type', 'application/json')
+    res.end(JSON.stringify({
+      query,
+      body,
+      params,
+    }))
+  }
+})
+```

package/dist/index.cjs

@@ -0,0 +1,266 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/index.ts
+var src_exports = {};
+__export(src_exports, {
+  default: () => src_default,
+  defineMock: () => defineMock,
+  mockDevServerPlugin: () => mockDevServerPlugin
+});
+module.exports = __toCommonJS(src_exports);
+
+// src/mockMiddleware.ts
+var import_promises = __toESM(require("fs/promises"), 1);
+var import_node_path = __toESM(require("path"), 1);
+var import_node_url = require("url");
+var import_chokidar = __toESM(require("chokidar"), 1);
+var import_co_body = __toESM(require("co-body"), 1);
+var import_debug = __toESM(require("debug"), 1);
+var import_fast_glob = __toESM(require("fast-glob"), 1);
+var import_path_to_regexp = require("path-to-regexp");
+var import_vite = require("vite");
+
+// src/utils.ts
+var isArray = (val) => Array.isArray(val);
+var isFunction = (val) => typeof val === "function";
+function sleep(timeout) {
+  return new Promise((resolve) => setTimeout(resolve, timeout));
+}
+
+// src/mockMiddleware.ts
+var MOCK_TEMP = "node_modules/.cache/.mock_server";
+var debug = (0, import_debug.default)("vite:plugin-mock-dev-server");
+async function mockServerMiddleware(httpServer, config, options) {
+  const include = isArray(options.include) ? options.include : [options.include];
+  const includePaths = await (0, import_fast_glob.default)(include, { cwd: process.cwd() });
+  const modules = /* @__PURE__ */ Object.create(null);
+  let mockList;
+  for (const filepath of includePaths) {
+    modules[filepath] = await loadModule(filepath);
+  }
+  setupMockList();
+  debug("start watcher: ", include);
+  debug("watcher api length: ", mockList.length);
+  const watcher = import_chokidar.default.watch(include.splice(0)[0], {
+    ignoreInitial: true,
+    cwd: process.cwd()
+  });
+  include.length > 0 && include.forEach((item) => watcher.add(item));
+  watcher.on("add", async (filepath) => {
+    debug("watcher add: ", filepath);
+    modules[filepath] = await loadModule(filepath);
+    setupMockList();
+  });
+  watcher.on("change", async (filepath) => {
+    debug("watcher change", filepath);
+    modules[filepath] = await loadModule(filepath);
+    setupMockList();
+  });
+  watcher.on("unlink", (filepath) => {
+    debug("watcher unlink", filepath);
+    delete modules[filepath];
+    setupMockList();
+  });
+  function setupMockList() {
+    mockList = [];
+    Object.keys(modules).forEach((key) => {
+      const handle = modules[key];
+      isArray(handle) ? mockList.push(...handle) : mockList.push(handle);
+    });
+    mockList = mockList.filter(
+      (mock) => mock.enabled || typeof mock.enabled === "undefined"
+    );
+  }
+  httpServer == null ? void 0 : httpServer.on("close", () => watcher.close());
+  const proxies = Object.keys(config.server.proxy || {});
+  return async function(req, res, next) {
+    if (proxies.length === 0 || !proxies.some((context) => doesProxyContextMatchUrl(context, req.url))) {
+      return next();
+    }
+    const method = req.method.toUpperCase();
+    const { query, pathname } = (0, import_node_url.parse)(req.url, true);
+    const reqBody = await parseReqBody(req);
+    const currentMock = mockList.find((mock) => {
+      if (!pathname || !mock || !mock.url)
+        return false;
+      const methods = mock.method ? isArray(mock.method) ? mock.method : [mock.method] : ["GET", "POST"];
+      if (!methods.includes(req.method.toUpperCase()))
+        return false;
+      const hasMock = (0, import_path_to_regexp.pathToRegexp)(mock.url).test(pathname);
+      if (hasMock && mock.validator) {
+        const urlMatch2 = (0, import_path_to_regexp.match)(mock.url, { decode: decodeURIComponent })(
+          pathname
+        ) || { params: {} };
+        const params2 = urlMatch2.params || {};
+        const request = {
+          query,
+          params: params2,
+          body: reqBody,
+          headers: req.headers
+        };
+        if (isFunction(mock.validator)) {
+          return mock.validator(request);
+        } else {
+          return validate(request, mock.validator);
+        }
+      }
+      return hasMock;
+    });
+    if (!currentMock)
+      return next();
+    debug("middleware: ", method, pathname);
+    if (currentMock.delay && currentMock.delay > 0) {
+      await sleep(currentMock.delay);
+    }
+    res.statusCode = currentMock.status || 200;
+    res.statusMessage = currentMock.statusText || "OK";
+    const urlMatch = (0, import_path_to_regexp.match)(currentMock.url, { decode: decodeURIComponent })(
+      pathname
+    ) || { params: {} };
+    const params = urlMatch.params || {};
+    req.body = reqBody;
+    req.query = query;
+    req.params = params;
+    res.setHeader("Content-Type", "application/json");
+    if (currentMock.headers) {
+      const headers = isFunction(currentMock.headers) ? await currentMock.headers({
+        query,
+        body: reqBody,
+        params,
+        headers: req.headers
+      }) : currentMock.headers;
+      Object.keys(headers).forEach((key) => {
+        res.setHeader(key, headers[key]);
+      });
+    }
+    if (currentMock.body) {
+      let body;
+      if (isFunction(currentMock.body)) {
+        body = await currentMock.body({
+          query,
+          body: reqBody,
+          params,
+          headers: req.headers
+        });
+      } else {
+        body = currentMock.body;
+      }
+      res.end(JSON.stringify(body));
+      return;
+    }
+    if (currentMock.response) {
+      await currentMock.response(
+        req,
+        res,
+        next
+      );
+      return;
+    }
+    res.end("");
+  };
+}
+function doesProxyContextMatchUrl(context, url) {
+  return context.startsWith("^") && new RegExp(context).test(url) || url.startsWith(context);
+}
+async function parseReqBody(req) {
+  const method = req.method.toUpperCase();
+  if (["GET", "DELETE", "HEAD"].includes(method))
+    return void 0;
+  const type = req.headers["content-type"];
+  if (type === "application/json") {
+    return await import_co_body.default.json(req);
+  }
+  if (type === "application/x-www-form-urlencoded") {
+    return await import_co_body.default.form(req);
+  }
+  if (type === "text/plain") {
+    return await import_co_body.default.text(req);
+  }
+  return await (0, import_co_body.default)(req);
+}
+async function loadModule(filepath) {
+  const ext = import_node_path.default.extname(filepath);
+  if (ext === ".ts") {
+    const tsText = await import_promises.default.readFile(filepath, "utf-8");
+    const { code } = await (0, import_vite.transformWithEsbuild)(tsText, filepath, {
+      target: "es2020",
+      platform: "node",
+      format: "esm"
+    });
+    const tempFile = import_node_path.default.join(
+      process.cwd(),
+      MOCK_TEMP,
+      filepath.replace(/\.ts$/, ".mjs")
+    );
+    const tempBasename = import_node_path.default.dirname(tempFile);
+    await import_promises.default.mkdir(tempBasename, { recursive: true });
+    await import_promises.default.writeFile(tempFile, code, "utf8");
+    return await loadESModule(tempFile);
+  }
+  return await loadESModule(filepath);
+}
+async function loadESModule(filepath) {
+  const handle = await import(`${filepath}?${Date.now()}`);
+  if (handle && handle.default)
+    return handle.default;
+  return Object.keys(handle || {}).map((key) => handle[key]);
+}
+function validate(request, validator) {
+  return equalObj(request.headers, validator.headers) && equalObj(request.body, validator.body) && equalObj(request.params, validator.params) && equalObj(request.query, validator.query);
+}
+function equalObj(left, right) {
+  if (!right)
+    return true;
+  for (const key in right) {
+    if (right[key] !== left[key])
+      return false;
+  }
+  return true;
+}
+
+// src/plugin.ts
+function mockDevServerPlugin(options = { include: ["mock/**/*.mock.*"] }) {
+  return {
+    name: "vite-plugin-mock-dev-server",
+    async configureServer({ middlewares, config, httpServer }) {
+      const middleware = await mockServerMiddleware(httpServer, config, options);
+      middlewares.use(middleware);
+    }
+  };
+}
+
+// src/define.ts
+var defineMock = (mock) => {
+  return mock;
+};
+
+// src/index.ts
+var src_default = mockDevServerPlugin;
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  defineMock,
+  mockDevServerPlugin
+});

package/dist/index.d.ts

@@ -0,0 +1,110 @@
+import { Connect, Plugin } from 'vite';
+import http from 'node:http';
+
+interface MockServerPluginOptions {
+    /**
+     * glob字符串匹配 mock数据文件
+     * @default []
+     */
+    include: string | string[];
+}
+declare type Method = 'GET' | 'POST' | 'PUT' | 'DELETE' | 'PATCH' | 'HEAD' | 'TRACE' | 'OPTIONS';
+declare type ResponseBody = Record<string, any> | any[] | string | number | null;
+interface ResponseReq {
+    /**
+     * 请求地址中位于 `?` 后面的 queryString，已解析为 json
+     */
+    query: Record<string, any>;
+    /**
+     * 请求体中 body 数据
+     */
+    body: Record<string, any>;
+    /**
+     * 请求地址中，/api/id/:id 解析后的 params 参数
+     */
+    params: Record<string, any>;
+    /**
+     * 请求 中的 headers
+     */
+    headers: Record<string, any>;
+}
+interface ResponseBodyFn {
+    (request: ResponseReq): ResponseBody | Promise<ResponseBody>;
+}
+interface ResponseHeaderFn {
+    (request: ResponseReq): Headers | Promise<Headers>;
+}
+declare type Headers = Record<string, any>;
+interface MockOptionsItem {
+    /**
+     * 需要做mock的接口地址，
+     * exp: `/api/login`, `/api/login/:id`
+     */
+    url: string;
+    /**
+     * 该接口支持的 请求方法，默认同时支持 GET 和 POST
+     *
+     * @default ['POST','GET']
+     */
+    method?: Method | Method[];
+    /**
+     * 是否启动对该接口的mock，在多数场景下，我们进需要对部分接口进行 mock，
+     * 而不是对所有配置了mock的请求进行全量mock，所以是否能够配置是否启用很重要
+     *
+     * @default true
+     */
+    enabled?: boolean;
+    /**
+     * 配置响应体 header
+     *
+     * @default {'Content-Type':'application/json'}
+     */
+    headers?: Headers | ResponseHeaderFn;
+    /**
+     * 配置 响应头状态码
+     *
+     * @default 200
+     */
+    status?: number;
+    /**
+     * 配置响应头状态文本
+     *
+     * @default 'OK'
+     */
+    statusText?: string;
+    /**
+     * 配置响应延迟时间, 单位： `ms`
+     *
+     * @default 0
+     */
+    delay?: number;
+    /**
+     * 配置响应体数据内容
+     *
+     * @default {}
+     */
+    body?: ResponseBody | ResponseBodyFn;
+    /**
+     * 如果需要设置复杂的响应内容，可以使用 response 方法，
+     * 该方法是一个 middleware，你可以在这里拿到 http 请求的 req、res等信息，
+     * 然后通过 res.write() | res.end() 返回响应数据， 否则执行 next() 方法。
+     *
+     * 在 req 中，还可以拿到 query、params、body等已解析的请求信息
+     */
+    response?: (req: Connect.IncomingMessage & ResponseReq, res: http.ServerResponse<http.IncomingMessage>, next: Connect.NextFunction) => void | Promise<void>;
+    /**
+     * 请求验证器
+     *
+     * 有时候，一个相同的API请求，需要根据不同的请求参数，来决定返回数据，
+     * 但全部都在单个 mock中的 body或者 response 中写，内容会很庞杂，不好管理，
+     * 验证器的功能，允许你同时配置多条相同url的mock，通过验证器来判断使哪个mock生效。
+     */
+    validator?: Partial<ResponseReq> | ((request: ResponseReq) => boolean);
+}
+declare type MockOptions = MockOptionsItem[];
+
+declare function mockDevServerPlugin(options?: MockServerPluginOptions): Plugin;
+
+declare const defineMock: (mock: MockOptionsItem | MockOptions) => MockOptionsItem | MockOptions;
+
+export { MockOptions, MockOptionsItem, MockServerPluginOptions, mockDevServerPlugin as default, defineMock, mockDevServerPlugin };

package/dist/index.js

@@ -0,0 +1,232 @@
+// src/mockMiddleware.ts
+import fs from "fs/promises";
+import path from "path";
+import { parse as urlParse } from "url";
+import chokidar from "chokidar";
+import bodyParser from "co-body";
+import Debug from "debug";
+import fastGlob from "fast-glob";
+import { match, pathToRegexp } from "path-to-regexp";
+import { transformWithEsbuild } from "vite";
+
+// src/utils.ts
+var isArray = (val) => Array.isArray(val);
+var isFunction = (val) => typeof val === "function";
+function sleep(timeout) {
+  return new Promise((resolve) => setTimeout(resolve, timeout));
+}
+
+// src/mockMiddleware.ts
+var MOCK_TEMP = "node_modules/.cache/.mock_server";
+var debug = Debug("vite:plugin-mock-dev-server");
+async function mockServerMiddleware(httpServer, config, options) {
+  const include = isArray(options.include) ? options.include : [options.include];
+  const includePaths = await fastGlob(include, { cwd: process.cwd() });
+  const modules = /* @__PURE__ */ Object.create(null);
+  let mockList;
+  for (const filepath of includePaths) {
+    modules[filepath] = await loadModule(filepath);
+  }
+  setupMockList();
+  debug("start watcher: ", include);
+  debug("watcher api length: ", mockList.length);
+  const watcher = chokidar.watch(include.splice(0)[0], {
+    ignoreInitial: true,
+    cwd: process.cwd()
+  });
+  include.length > 0 && include.forEach((item) => watcher.add(item));
+  watcher.on("add", async (filepath) => {
+    debug("watcher add: ", filepath);
+    modules[filepath] = await loadModule(filepath);
+    setupMockList();
+  });
+  watcher.on("change", async (filepath) => {
+    debug("watcher change", filepath);
+    modules[filepath] = await loadModule(filepath);
+    setupMockList();
+  });
+  watcher.on("unlink", (filepath) => {
+    debug("watcher unlink", filepath);
+    delete modules[filepath];
+    setupMockList();
+  });
+  function setupMockList() {
+    mockList = [];
+    Object.keys(modules).forEach((key) => {
+      const handle = modules[key];
+      isArray(handle) ? mockList.push(...handle) : mockList.push(handle);
+    });
+    mockList = mockList.filter(
+      (mock) => mock.enabled || typeof mock.enabled === "undefined"
+    );
+  }
+  httpServer == null ? void 0 : httpServer.on("close", () => watcher.close());
+  const proxies = Object.keys(config.server.proxy || {});
+  return async function(req, res, next) {
+    if (proxies.length === 0 || !proxies.some((context) => doesProxyContextMatchUrl(context, req.url))) {
+      return next();
+    }
+    const method = req.method.toUpperCase();
+    const { query, pathname } = urlParse(req.url, true);
+    const reqBody = await parseReqBody(req);
+    const currentMock = mockList.find((mock) => {
+      if (!pathname || !mock || !mock.url)
+        return false;
+      const methods = mock.method ? isArray(mock.method) ? mock.method : [mock.method] : ["GET", "POST"];
+      if (!methods.includes(req.method.toUpperCase()))
+        return false;
+      const hasMock = pathToRegexp(mock.url).test(pathname);
+      if (hasMock && mock.validator) {
+        const urlMatch2 = match(mock.url, { decode: decodeURIComponent })(
+          pathname
+        ) || { params: {} };
+        const params2 = urlMatch2.params || {};
+        const request = {
+          query,
+          params: params2,
+          body: reqBody,
+          headers: req.headers
+        };
+        if (isFunction(mock.validator)) {
+          return mock.validator(request);
+        } else {
+          return validate(request, mock.validator);
+        }
+      }
+      return hasMock;
+    });
+    if (!currentMock)
+      return next();
+    debug("middleware: ", method, pathname);
+    if (currentMock.delay && currentMock.delay > 0) {
+      await sleep(currentMock.delay);
+    }
+    res.statusCode = currentMock.status || 200;
+    res.statusMessage = currentMock.statusText || "OK";
+    const urlMatch = match(currentMock.url, { decode: decodeURIComponent })(
+      pathname
+    ) || { params: {} };
+    const params = urlMatch.params || {};
+    req.body = reqBody;
+    req.query = query;
+    req.params = params;
+    res.setHeader("Content-Type", "application/json");
+    if (currentMock.headers) {
+      const headers = isFunction(currentMock.headers) ? await currentMock.headers({
+        query,
+        body: reqBody,
+        params,
+        headers: req.headers
+      }) : currentMock.headers;
+      Object.keys(headers).forEach((key) => {
+        res.setHeader(key, headers[key]);
+      });
+    }
+    if (currentMock.body) {
+      let body;
+      if (isFunction(currentMock.body)) {
+        body = await currentMock.body({
+          query,
+          body: reqBody,
+          params,
+          headers: req.headers
+        });
+      } else {
+        body = currentMock.body;
+      }
+      res.end(JSON.stringify(body));
+      return;
+    }
+    if (currentMock.response) {
+      await currentMock.response(
+        req,
+        res,
+        next
+      );
+      return;
+    }
+    res.end("");
+  };
+}
+function doesProxyContextMatchUrl(context, url) {
+  return context.startsWith("^") && new RegExp(context).test(url) || url.startsWith(context);
+}
+async function parseReqBody(req) {
+  const method = req.method.toUpperCase();
+  if (["GET", "DELETE", "HEAD"].includes(method))
+    return void 0;
+  const type = req.headers["content-type"];
+  if (type === "application/json") {
+    return await bodyParser.json(req);
+  }
+  if (type === "application/x-www-form-urlencoded") {
+    return await bodyParser.form(req);
+  }
+  if (type === "text/plain") {
+    return await bodyParser.text(req);
+  }
+  return await bodyParser(req);
+}
+async function loadModule(filepath) {
+  const ext = path.extname(filepath);
+  if (ext === ".ts") {
+    const tsText = await fs.readFile(filepath, "utf-8");
+    const { code } = await transformWithEsbuild(tsText, filepath, {
+      target: "es2020",
+      platform: "node",
+      format: "esm"
+    });
+    const tempFile = path.join(
+      process.cwd(),
+      MOCK_TEMP,
+      filepath.replace(/\.ts$/, ".mjs")
+    );
+    const tempBasename = path.dirname(tempFile);
+    await fs.mkdir(tempBasename, { recursive: true });
+    await fs.writeFile(tempFile, code, "utf8");
+    return await loadESModule(tempFile);
+  }
+  return await loadESModule(filepath);
+}
+async function loadESModule(filepath) {
+  const handle = await import(`${filepath}?${Date.now()}`);
+  if (handle && handle.default)
+    return handle.default;
+  return Object.keys(handle || {}).map((key) => handle[key]);
+}
+function validate(request, validator) {
+  return equalObj(request.headers, validator.headers) && equalObj(request.body, validator.body) && equalObj(request.params, validator.params) && equalObj(request.query, validator.query);
+}
+function equalObj(left, right) {
+  if (!right)
+    return true;
+  for (const key in right) {
+    if (right[key] !== left[key])
+      return false;
+  }
+  return true;
+}
+
+// src/plugin.ts
+function mockDevServerPlugin(options = { include: ["mock/**/*.mock.*"] }) {
+  return {
+    name: "vite-plugin-mock-dev-server",
+    async configureServer({ middlewares, config, httpServer }) {
+      const middleware = await mockServerMiddleware(httpServer, config, options);
+      middlewares.use(middleware);
+    }
+  };
+}
+
+// src/define.ts
+var defineMock = (mock) => {
+  return mock;
+};
+
+// src/index.ts
+var src_default = mockDevServerPlugin;
+export {
+  src_default as default,
+  defineMock,
+  mockDevServerPlugin
+};

package/package.json

@@ -0,0 +1,68 @@
+{
+  "name": "vite-plugin-mock-dev-server",
+  "version": "0.1.0",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/pengzhanbo/vite-plugin-mock-dev-server"
+  },
+  "author": "pengzhanbo <q942450674@outlook.com> (https://github.com/pengzhanbo)",
+  "license": "MIT",
+  "type": "module",
+  "main": "dist/index.cjs",
+  "module": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "exports": {
+    ".": {
+      "import": "./dist/index.js",
+      "require": "./dist/index.cjs"
+    }
+  },
+  "files": [
+    "dist"
+  ],
+  "tsup": {
+    "entry": [
+      "src/index.ts"
+    ],
+    "sourcemap": false,
+    "dts": true,
+    "splitting": false,
+    "clean": true,
+    "format": [
+      "esm",
+      "cjs"
+    ]
+  },
+  "prettier": "@pengzhanbo/prettier-config",
+  "dependencies": {
+    "chokidar": "^3.5.3",
+    "co-body": "^6.1.0",
+    "debug": "^4.3.4",
+    "fast-glob": "^3.2.12",
+    "path-to-regexp": "^6.2.1",
+    "vite": "^3.2.0"
+  },
+  "devDependencies": {
+    "@pengzhanbo/eslint-config-ts": "^0.2.10",
+    "@pengzhanbo/prettier-config": "^0.2.10",
+    "@types/co-body": "^6.1.0",
+    "@types/debug": "^4.1.7",
+    "@types/node": "^18.11.7",
+    "bumpp": "^8.2.1",
+    "concurrently": "^7.5.0",
+    "eslint": "^8.26.0",
+    "prettier": "^2.7.1",
+    "tsup": "^6.3.0",
+    "typescript": "^4.8.4",
+    "vite-plugin-mock-dev-server": "file:"
+  },
+  "packageManager": "pnpm@7.14.0",
+  "engines": {
+    "node": ">=16"
+  },
+  "scripts": {
+    "dev": "DEBUG=vite:plugin-mock-dev-server vite example --config ./example/vite.config.ts",
+    "build": "tsup",
+    "release": "bumpp package.json --commit --push --tag && pnpm publish --access public"
+  }
+}