simple-mock-webpack-plugin
中文文档
Binds a local service to your webpack-dev-server
for mocking data.
Features
- Config of mocking supports hot reloading
- No more new listening port, no more CORS
- Mocks APIs in a succinct and simple way
- Stores data in the service(in memory), like a database
- Uses
mockjs
to support data mocking, learn more about nuysoft/Mock
P.S.: This repo is called simple-mock-webpack-plugin
, but it isn't a stantard webpack-plugin
because of its usage. 😂
Installation
Yarn
yarn add -D simple-mock-webpack-plugin
NPM
npm i -D simple-mock-webpack-plugin
Getting Started
1. Sets devServer.before
in webpack.config.js
const { buildBefore } = require('simple-mock-webpack-plugin')
module.exports = {
devServer: {
before: buildBefore()
}
}
2. Create a config file named mock.js
in the same directory
module.exports = {
apis: [
{
url: '/test',
template: {
code: '@integer(100,600)',
msg: 'ok'
}
},
{
url: '/test-promise',
template: (mock) => {
return new Promise((res) => {
setTimeout(() => {
res(mock({
code: '@integer(100,600)',
msg: 'ok'
}))
}, 3000)
})
}
},
{
url: '/count',
template(mock, { state, request, response, Mock }) {
state.counter = (state.counter || 0) + 1
return {
data: state.counter
}
}
},
{
url: '/get-count-number',
template(mock, { state, request, response, Mock }) {
return {
count: state.counter || 0
}
}
},
]
}
3. Have a try
const _fetch = url => fetch(url).then(resp => resp.json()).then(console.log)
_fetch('/test')
_fetch('/count')
_fetch('/count')
Options
Name | Type | Required | Default | Description |
---|
configPath | string | No | ./mock.js | The path of config file |
log | boolean | No | true | Whether prints logs |
before | Function | No | null | Customized before |
reloadDelay | number | No | 300 | Dealy of service's reloading |
Example
module.exports = {
devServer: {
before: buildBefore({ configPath: path.resolve(__dirname, 'my_mock.js') })
}
}
Configuration of Mocking
Learn more about the configuration at examples.
Name | Type | Required | Default | Description |
---|
prefix | string | No | / | The prefix of all APIs |
delay | boolean | No | 0 | Dealy of the reponse for all APIs |
apis | MockAPI[] | Yes | | The configuration of APIs |
Name | Type | Required | Default | Description |
---|
url | string | Yes | | Path relative to the prefix |
method | string | No | all | The method of API |
template | object | MockAPIHandler | Yes | | The tempalte of response. It will be regared as mockjs template if it is an object .(Learn more at Syntax). You can custmize reponse if you set it as a function. |
(mock: MockjsMock, options: ExtraOptions) => object|Promise<object>
Name | Type | Default | Description |
---|
state | object | {} | Temporary states in the service. It will not be affected from config changing |
request | Express.Request | | Express Request |
response | Express.Response | | Express Response |
Mock | Mock.Mockjs | | Mock = require('mockjs') |
License
MIT