Webpack-mock-proxy-middleware NPM

webpack-mock-proxy-middleware

说明

这是一个webpack-dev-server的中间件。主要作用有两个 1. 本地mock数据 2. 代理接口

这个插件的目的是解决前端开发过程中过度依赖后端接口协议的尴尬。

使用

const mockProxyMiddleware = require('webpack-mock-proxy-middleware');

devServer: { 
  before: function(app, server) {
    mockProxyMiddleware(app, server, getEntry('mock.js'));
  });
}

配置文件规范

目前支持js文件类型，遵循node模块规范，使用module.exports导出一个对象。

对象是每个接口的配置项。每个配置项是一个对象。接口名是key，配置内容是value。

接口名是接口的路径，尽量规范，前后斜杠可以忽略，插件会自动匹配。

配置内容是一个对象，可以支持proxyTarget，mockData，apiConfig这三个字段。

'api/hotel/list/v2/': {
  proxyTarget: {
    enable: true,
    target: 'https://xxx.xxx.com'
  },
  mockData: {
    enable: true,
    method: 'post',
    data: {},
  },
  apiConfig: {
    timeout: 2000,
    rate: 0.5
  }
}

配置说明

mockData

这是用来配置mock数据。它是一个对象。

字段说明

enable是开关，true的时候可以打开，false的时候关闭。
method是请求方式。目前支持常见的post和get
data字段是mock数据，可以是一个对象，也可以是一个函数，函数的参数是url query上或者post请求体中解析以后的对象，我们可以在其中根据请求内容自定义返回的结果。比如
```
mockData: {
  enable: true,
  method: 'post',
  data(param) {
    if (param.number > 10) {
      return {
        msg: '成功啦'
      }
    } else {
      return {
        msg: '失败啦'
      }
    }
  }
},
```