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

1yarn add -D simple-mock-webpack-plugin

NPM

1npm i -D simple-mock-webpack-plugin

Getting Started

1. Sets devServer.before in webpack.config.js

1const { buildBefore } = require('simple-mock-webpack-plugin')
2
3module.exports = {
4    devServer: {
5        before: buildBefore()
6    }
7}

2. Create a config file named mock.js in the same directory

1module.exports = {
2    apis: [
3        {
4            url: '/test',
5            template: {
6                code: '@integer(100,600)',
7                msg: 'ok'
8            }
9        },
10        {
11            url: '/test-promise',
12            template: (mock) => {
13                return new Promise((res) => {
14                    setTimeout(() => {
15                        res(mock({
16                            code: '@integer(100,600)',
17                            msg: 'ok'
18                        }))
19                    }, 3000)
20                })
21            }
22        },
23        {
24            url: '/count',
25            template(mock, { state, request, response, Mock }) {
26                state.counter = (state.counter || 0) + 1
27                return {
28                    data: state.counter
29                }
30            }
31        },
32        {
33            url: '/get-count-number',
34            template(mock, { state, request, response, Mock }) {
35                return {
36                    count: state.counter || 0
37                }
38            }
39        },
40    ]
41}

3. Have a try

1const _fetch = url => fetch(url).then(resp => resp.json()).then(console.log)
2
3_fetch('/test') // {code: 264, msg: "ok"}
4_fetch('/count') // {data: 1}
5_fetch('/count') // {data: 2}

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

1module.exports = {
2    devServer: {
3        before: buildBefore({ configPath: path.resolve(__dirname, 'my_mock.js') })
4    }
5}

Configuration of Mocking

Learn more about the configuration at examples.

• MockConfig

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

• MockAPI

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.

• MockAPIHandler

1(mock: MockjsMock, options: ExtraOptions) => object|Promise<object>

• ExtraOptions

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