vite-plugin-mock-dev-server 0.3.15 → 0.3.17

package/README.md

@@ -37,11 +37,20 @@
 - ⚖️ Use `server.proxy`
 - 🍕 Support `viteConfig.define` in mock file
 - 📤 Support `multipart` content-type，mock upload file.
+- 🌈 Support `vite preview` mode
+- 🗂 Support for building small mock services that can be deployed independently
+
+
 ## Documentation
 
 See the [documentation](https://vite-plugin-mock-dev-server.netlify.app/) to learn more.
+
 [![Netlify Status](https://api.netlify.com/api/v1/badges/9ccda610-2c6a-4cd0-aeaa-a8932f2b477c/deploy-status)](https://app.netlify.com/sites/vite-plugin-mock-dev-server/deploys)
 
+## Playground
+
+[![Open in StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/github/pengzhanbo/vite-plugin-mock-dev-server/tree/main/playground)
+
 ## Usage
 
 ### Install
@@ -157,6 +166,29 @@ export default defineConfig({
   })
   ```
 
+- `options.build`
+  
+  When building a small, independently deployable mock service.
+
+  Type： `boolean | ServerBuildOptions` 
+
+  Default：`false`
+
+  ```ts
+  interface ServerBuildOptions {
+    /**
+     * server port
+     * @default 8080
+     */
+    serverPort?: number
+    /**
+     * build output dir
+     @default 'mockServer'
+     */
+    dist?: string
+  }
+  ```
+
 ### defineMock(config)
 
 Mock Type Helper
@@ -221,14 +253,14 @@ export default defineMock({
    * configurations and determines which mock configuration
    * is valid according to the validator.
    * 
-   * @type { header?: object; body?: object; query?: object; params?: object  }
+   * @type { headers?: object; body?: object; query?: object; params?: object  }
    * 
    * If the validator incoming is an object, 
    * then the validation method is the comparison of the 
    * strict request of interface, headers/body/query/params 
    * each `key-value` congruent, congruent check through
    * 
-   * @type ({ header: object; body: object; query: object; params: object }) => boolean
+   * @type ({ headers: object; body: object; query: object; params: object }) => boolean
    * If the validator is passed a function, 
    * it takes the requested interface-related data as an input,
    * gives it to the consumer for custom validation, 
@@ -260,7 +292,7 @@ export default defineMock({
    * 
    * @type string | number | array | object
    * 
-   * @type (request: { header, query, body, params }) => any | Promise<any>
+   * @type (request: { headers, query, body, params }) => any | Promise<any>
    */
   body: {},
 
@@ -468,6 +500,26 @@ export default defineMock({
 })
 ```
 
+## Mock Services
+
+In some scenarios, you may need to use the data support provided by the mock service for display purposes, but it is possible that the project has been packaged and deployed as a build and is out of the mock service support provided by `vite` and this plugin. Since this plugin was designed to support the import of `node` modules into mock files, it cannot package mock files inline into client-side build code.
+
+To cater for such scenarios, the plugin provides support under `vite preview` as well as the ability to build a small, independently deployable mock service application at `vite build` that can be deployed to the relevant environment. The mock support is then implemented by proxy forwarding to the actual port by another http server such as `nginx`.
+
+Build the default output into the `dist/mockServer` directory and generate the following file:
+```sh
+./mockServer
+├── index.js
+├── mock-data.js
+└── package.json
+```
+
+In this directory, after `npm install` to install the dependencies, `npm start` can be executed to start the mock server.
+
+default port: `8080`。
+
+Access the associated `mock` interface via `localhost:8080/`.
+
 ## Archives
 
 [awesome-vite](https://github.com/vitejs/awesome-vite#helpers)

package/README.zh-CN.md

@@ -38,12 +38,19 @@
 - ⚖️ 使用 `server.proxy` 配置
 - 🍕 支持在 mock文件中使用 `viteConfig.define`配置字段
 - 📤 支持 multipart 类型，模拟文件上传
+- 🌈 支持 `vite preview` 模式
+- 🗂 支持构建可独立部署的小型mock服务
 
 
 ## 文档
 
 查看 [Documentation](https://vite-plugin-mock-dev-server.netlify.app/) 了解更多。
+
 [![Netlify Status](https://api.netlify.com/api/v1/badges/9ccda610-2c6a-4cd0-aeaa-a8932f2b477c/deploy-status)](https://app.netlify.com/sites/vite-plugin-mock-dev-server/deploys)
+
+## Playground
+
+[![Open in StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/github/pengzhanbo/vite-plugin-mock-dev-server/tree/main/playground)
 ## 使用
 
 ### 安装
@@ -133,7 +140,17 @@ export default defineConfig({
   
   配置读取 mock文件时，需要排除的文件， 可以是一个 目录、glob、或者一个数组
 
-  默认值：`['**/node_modules/**','**/test/**','**/cypress/**','src/**','**/.vscode/**','**/.git/**','**/dist/**',]`
+  默认值：
+  ```ts
+  [
+    '**/node_modules/**',
+    '**/test/**',
+    'src/**',
+    '**/.vscode/**',
+    '**/.git/**',
+    '**/dist/**'
+  ]
+  ```
 
 - `options.formidableOptions`
   
@@ -150,6 +167,28 @@ export default defineConfig({
   })
   ```
 
+- `options.build`
+  
+  构建可独立部署的小型mock服务时配置。
+
+  类型： `boolean | ServerBuildOptions` 
+
+  默认值：`false`
+
+  ```ts
+  interface ServerBuildOptions {
+    /**
+     * 服务端口
+     * @default 8080
+     */
+    serverPort?: number
+    /**
+     * 构建输出目录
+     @default 'mockServer'
+     */
+    dist?: string
+  }
+  ```
 
 ### defineMock(config)
 
@@ -212,13 +251,13 @@ export default defineMock({
    * 验证器可以很好的解决这一类问题，将同个 url 分为多个 mock配置，
    * 根据 验证器来判断哪个mock配置生效。
    * 
-   * @type { header?: object; body?: object; query?: object; params?: object  }
+   * @type { headers?: object; body?: object; query?: object; params?: object  }
    * 
    * 如果 validator 传入的是一个对象，那么验证方式是严格比较 请求的接口
    * 中，headers/body/query/params 的各个`key`的`value`是否全等，
    * 全等则校验通过
    * 
-   * @type ({ header: object; body: object; query: object; params: object }) => boolean
+   * @type ({ headers: object; body: object; query: object; params: object }) => boolean
    * 如果 validator 传入的是一个函数，那么会讲 请求的接口相关数据作为入参，提供给使用者进行自定义校验，并返回一个 boolean
    * 
    */
@@ -250,7 +289,7 @@ export default defineMock({
    * @type string | number | array | object
    *  直接返回定义的数据
    * 
-   * @type (request: { header, query, body, params }) => any | Promise<any>
+   * @type (request: { headers, query, body, params }) => any | Promise<any>
    * 如果传入一个函数，那么可以更加灵活的定义返回响应体数据
    */
   body: {},
@@ -463,6 +502,24 @@ export default defineMock({
 })
 ```
 
+## 独立部署的小型mock服务
+
+在一些场景中，可能会需要使用mock服务提供的数据支持，用于展示，但可能项目已完成打包构建部署，已脱离 `vite` 和本插件提供的 mock服务支持。由于本插件在设计之初，支持在mock文件中引入各种 `node` 模块，所以不能将 mock文件打包内联到客户端构建代码中。
+
+为了能够满足这类场景，插件一方面提供了 `vite preview` 下的支持，同时还提供了在 `vite build` 时，也构建一个可独立部署的 小型mock服务应用，可以将这个应用部署到相关的环境，后通过其他http服务器如nginx做代理转发到实际端口实现mock支持。
+
+构建默认输出到 `dist/mockServer` 目录中，并生成如下文件：
+```sh
+./mockServer
+├── index.js
+├── mock-data.js
+└── package.json
+```
+
+在该目录下，执行 `npm install` 安装依赖后，可执行 `npm start` 即可启动 mock server。
+默认端口为 `8080`。
+可通过 `localhost:8080/` 访问相关的 `mock` 接口。
+
 ## Archives
 
 [awesome-vite](https://github.com/vitejs/awesome-vite#helpers)