Skip to content
webpack-api-mocker is a webpack-dev-server middleware that creates mocks for REST APIs. It will be helpful when you try to test your application without the actual REST API server.
JavaScript HTML
Branch: master
Clone or download
Pull request Compare This branch is 130 commits behind jaywcjlove:master.
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
example
.gitignore
.npmignore
README.md
index.js
package-lock.json
package.json

README.md

webpack-api-mocker

webpack-api-mocker is a webpack-dev-server middleware that creates mocks for REST APIs. It will be helpful when you try to test your application without the actual REST API server.

Features:

🔥 Built in support for hot Mocker file replacement.
🚀 Quickly and easily configure the API via JSON.
🌱 Mock API proxying made simple.

Installation

npm install webpack-api-mocker --save-dev

Usage

webpack-api-mocker dev support mock, configured in mocker.js.

const proxy = {
  'GET /api/user': {
    id: 1,
    username: 'kenny',
    sex: 6
  },
  'GET /api/user/list': [
    {
      id: 1,
      username: 'kenny',
      sex: 6
    }, {
      id: 2,
      username: 'kenny',
      sex: 6
    }
  ],
  'POST /api/login/account': (req, res) => {
    const { password, username } = req.body;
    if (password === '888888' && username === 'admin') {
      return res.json({
        status: 'ok',
        code: 0,
        token: "sdfsdfsdfdsf",
        data: {
          id: 1,
          username: 'kenny',
          sex: 6
        }
      });
    } else {
      return res.json({
        status: 'error',
        code: 403
      });
    }
  },
  'DELETE /api/user/:id': (req, res) => {
    console.log('---->', req.body)
    console.log('---->', req.params.id)
    res.send({ status: 'ok', message: '删除成功!' });
  }
}
module.exports = proxy;

apiMocker

apiMocker(app, mocker[,proxy])

Using with Express

const path = require('path');
const express = require('express');
+ const apiMocker = require('webpack-api-mocker');

const app = express();

+ apiMocker(app, path.resolve('./mocker/index.js'))
app.listen(8080);

Using with Webpack

To use api mocker on your Webpack projects, simply add a setup options to your webpack-dev-server options:

Change your config file to tell the dev server where to look for files: webpack.config.js.

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
+ const apiMocker = require('webpack-api-mocker');

module.exports = {
  entry: {
    app: './src/index.js',
    print: './src/print.js'
  },
  devtool: 'inline-source-map',
+ devServer: {
+   ...
+   before(app){
+     apiMocker(app, path.resolve('./mocker.js'), {
+       proxy: {
+         '/repos//*': 'https://api.github.com/',
+       },
+       changeHost: true,
+     })
+   }
+ },
  plugins: [
    new HtmlWebpackPlugin({
      title: 'Development'
    })
  ],
  output: {
    filename: '[name].bundle.js',
    path: path.resolve(__dirname, 'dist')
  }
};

Must have a file suffix! For example: ./mocker.js.

Let's add a script to easily run the dev server as well: package.json

  {
    "name": "development",
    "version": "1.0.0",
    "description": "",
    "main": "webpack.config.js",
    "scripts": {
      "test": "echo \"Error: no test specified\" && exit 1",
+     "start": "webpack-dev-server --open",
      "build": "webpack"
    },
    "keywords": [],
    "author": "",
    "license": "MIT",
    "devDependencies": {
      ....
    }
  }

Mock API proxying made simple.

{
  before(app){
+   apiMocker(app, path.resolve('./mocker.js'), {
+     proxy: {
+       '/repos//*': 'https://api.github.com/',
+     },
+     changeHost: true,
+   })
  }
}
You can’t perform that action at this time.