是一个为 REST API 创建 mock 的 中间件。 当您尝试在没有实际的 REST API 服务器的情况下，测试您的应用程序时，这将会很有帮助。

安装

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

使用

定义API，假设我们讲API放到一个独立文件 mocker/index.js 中, 下面我们定义四个 API，每个 API 都放到 json 的 key 和 value 中，如下：

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.send({        status: 'ok',        code: 0,        token: "sdfsdfsdfdsf",        data: {id: 1, username: 'kenny', sex: 6 }      });    } else {      return res.send({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;

上面的 key 比较特殊，由 methd 和 path 组合，中间一个空格间隔，如：GET /api/user。value 可以是 json 或者 函数。

在 Webpack 中使用

要在你的 Webpack 项目中使用 api mocker，只需将设置选项，添加到你的 选项中即可：

改变你的配置文件，告诉dev服务器在哪里查找文件：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/index.js'), {+       proxy: {+         '/repos/*': 'https://api.github.com/',+       },+       changeHost: true,+     })+   }+ },  plugins: [    new HtmlWebpackPlugin({      title: 'Development'    })  ],  output: {    filename: '[name].bundle.js',    path: path.resolve(__dirname, 'dist')  }};

模拟API代理变得简单。

{  before(app){+   apiMocker(app, path.resolve('./mocker/index.js'), {+     proxy: {+       '/repos/*': 'https://api.github.com/',+     },+     changeHost: true,+   })  }}

让我们添加一个脚本来轻松运行开发服务器：

修改 package.json

{  "name": "development",  "version": "1.0.0",  "description": "",  "main": "webpack.config.js",  "scripts": {    "test": "echo \"Error: no test specified\" && exit 1",    "watch": "webpack --progress --watch",+   "start": "webpack-dev-server --open",    "build": "webpack"  },  "keywords": [],  "author": "",  "license": "ISC",  "devDependencies": {    "clean-webpack-plugin": "^0.1.16",    "css-loader": "^0.28.4",    "csv-loader": "^2.1.1",    "file-loader": "^0.11.2",    "html-webpack-plugin": "^2.29.0",    "style-loader": "^0.18.2",    "webpack": "^3.0.0",    "xml-loader": "^1.2.1"  }}

运行下面命令，跑起来，通过工具测试一下你模拟的API是否能返回结果。

npm run start

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);