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') // {code: 264, msg: "ok"}
_fetch('/count') // {data: 1}
_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

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

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

(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