Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

simple-mock-webpack-plugin

Package Overview
Dependencies
Maintainers
1
Versions
2
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

simple-mock-webpack-plugin

Binds a mocking service to your webpack-dev-server

  • 0.0.2
  • latest
  • Source
  • npm
  • Socket score

Version published
Maintainers
1
Created
Source

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

NameTypeRequiredDefaultDescription
configPathstringNo./mock.jsThe path of config file
logbooleanNotrueWhether prints logs
beforeFunctionNonullCustomized before
reloadDelaynumberNo300Dealy 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
NameTypeRequiredDefaultDescription
prefixstringNo/The prefix of all APIs
delaybooleanNo0Dealy of the reponse for all APIs
apisMockAPI[]YesThe configuration of APIs
  • MockAPI
NameTypeRequiredDefaultDescription
urlstringYesPath relative to the prefix
methodstringNoallThe method of API
templateobject | MockAPIHandlerYesThe 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
NameTypeDefaultDescription
stateobject{}Temporary states in the service. It will not be affected from config changing
requestExpress.RequestExpress Request
responseExpress.ResponseExpress Response
MockMock.MockjsMock = require('mockjs')

License

MIT

Keywords

FAQs

Package last updated on 02 Oct 2019

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc