https://github.com/yunyoujun/unplugin-mockery
😛 Let's manage your mock.
https://github.com/yunyoujun/unplugin-mockery
mockery unplugin
Last synced: 10 months ago
JSON representation
😛 Let's manage your mock.
- Host: GitHub
- URL: https://github.com/yunyoujun/unplugin-mockery
- Owner: YunYouJun
- License: mit
- Created: 2024-06-28T11:07:12.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2024-11-09T11:37:45.000Z (over 1 year ago)
- Last Synced: 2024-11-17T03:25:55.482Z (over 1 year ago)
- Topics: mockery, unplugin
- Language: TypeScript
- Homepage: https://www.npmjs.com/package/unplugin-mockery
- Size: 1.26 MB
- Stars: 3
- Watchers: 1
- Forks: 0
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- Funding: .github/FUNDING.yml
- License: LICENSE
Awesome Lists containing this project
README
# unplugin-mockery
[](https://www.npmjs.com/package/unplugin-mockery)
[Preview Usage Video](https://github.com/YunYouJun/unplugin-mockery/discussions/3)
## Features
- Vue CLI (webpack)
- Vite
- Hot Reload Routes
## Why unplugin-mockery?
- A visual mock management devtool.
- We have some old projects that need to be compatible with Vue CLI and Vite.
## Install
```bash
pnpm add -D unplugin-mockery
```
Vite
```ts
// vite.config.ts
import Mocker from 'unplugin-mockery/vite'
export default defineConfig({
plugins: [
Mocker({ /* options */ }),
],
})
```
Example: [`playground/`](./playground/)
Rollup
```ts
// rollup.config.js
import Mocker from 'unplugin-mockery/rollup'
export default {
plugins: [
Mocker({ /* options */ }),
],
}
```
Webpack
```ts
// webpack.config.js
module.exports = {
/* ... */
plugins: [
require('unplugin-mockery/webpack').default({ /* options */ })
]
}
```
Nuxt
```ts
export default defineNuxtConfig({
modules: [
'unplugin-mockery/nuxt',
],
unpluginMockery: {
mockDir,
client: {
port: 51223,
},
},
})
```
Vue CLI
在 Webpack 中，它工作地很好。
但在 Vue Cli 中，`webpack-dev-server` 的启动时机有所不同，因此我们无法通过插件获取 Vue Cli 中的 `webpack-dev-server` `devServer` 的实例。
而是通过获取 webpack 的方式进行设置。
In Webpack, it works well.
But in Vue Cli, the timing of starting `webpack-dev-server` is different, so we cannot get the instance of `webpack-dev-server` `devServer` in Vue Cli through the plugin.
Instead, we set it by `getWebpackConfig`.
```ts
// vue.config.js
const { getWebpackConfig } = require('unplugin-mockery/webpack')
module.exports = {
configureWebpack: {
devServer: {
...getWebpackConfig({ /* options */ }).devServer,
},
},
}
```
```bash
# .env custom client port
VUE_APP_MOCKERY_CLIENT_PORT=51224
```
esbuild
```ts
// esbuild.config.js
import { build } from 'esbuild'
import Mocker from 'unplugin-mockery/esbuild'
build({
plugins: [Mocker()],
})
```
### Schema Setting in VSCode
Edit `.vscode/settings.json`:
```json
{
// schema
"json.schemas": [
{
"fileMatch": ["*.scene.json"],
"url": "./mock/schemas/scene.schema.json"
}
]
}
```
## Development
```bash
# run template
# for vue-cli(webpack)
pnpm play:vue-cli
# for webpack
pnpm play:webpack
# for vite
pnpm play:vite
```
## Options
```ts
export interface Options {
/**
* Base URL for inspector UI
*
* @default read from Vite's config
*/
base?: string
// define your plugin options here
/**
* Display debug information.
*/
debug?: boolean
/**
* The directory where the mock files are located.
* @default 'mock'
* mock/api: mock files
* mock/scenes: scene files
* mock/schemas: schema file
* scene.schema.json: scene schema file
* config.schema.json: config schema file
* mock/utils: utility files
* mock/config.json: configuration file
*/
mockDir: string
/**
* mock client ui
*/
client?: {
/**
* enable client
* @default true
*/
enable?: boolean
/**
* The port to run the client server.
*/
port?: number
/**
* auto open browser.
*/
open?: boolean
}
}
```
## Todo
- filename as url when url not set
- click settings icon show config in dialog
- 添加 UI 创建场景合集功能