webpack-plugin-mock

一款mockjs的webpack插件，配置简单、易用; Mock 编写灵活...如果对你有帮助，给个star

安装

1# npm
2npm install @elin/webpack-plugin-mock -D
3
4# yarn
5yarn add @elin/webpack-plugin-mock -D

使用

需要在当前目录下有 mock 文件夹

1├── mock
2|  ├── books/
3|  |  ├── books/
4|  |  |   └── queryBooksByPage
5|  |  |   |   └──  data.json
6|  ├── example/
7|  |  ├── json.js
8|  |  └── x-www-from-urlencoded.js
9|  └── user/
10|     └── list.json
11└── package.json

webpack 配置

1const WebpackPluginMock = require('@elin/webpack-plugin-mock')
2 new WebpackPluginMock({
3    apiBasePath: './mock',
4    watch: true,
5    pretty: true,
6    port: 8090,
7    enableMock: false
8  })
9
10  port  Mock 服务的启动端口
11  config  Mock 服务的启动配置
12  apiBasePath  Mock 服务 API 目录
13  pretty  是否对 JSON Response 美化
14  watch   是否监控 API 目录文件变化
15  enableMock 默认是否支持mockjs语法，默认值：false

Mock 编写

用法一：定义 JSON（支持 mockjs 语法，可通过初始化属性enableMock: true开启）

1{
2  "code": 0,
3  "msg": "",
4  "data": {
5    "dataList|10" :[
6      {
7        "id": "@id",
8        "name": "@cname",
9        "phone": "@pick([13913998972, 19941558406])",
10        "deptName": "前端开发部"
11      }
12    ],
13    "totalCount": 20,
14    "totalPageCount": 2
15  }
16}

文件路径：xxx/apis/demo/qux.json，会自动创建路由为 /demo/qux 的接口，支持 GET/POST/JSONP 等方法。

兼容旧版 mock 服务，如果 JSON 文件路径为 xxx/apis/demo/foo/data.json，则创建的路由为 /demo/foo。

用法二：定义 CommonJS 模块（支持 mockjs 语法，可通过初始化属性enableMock: true开启），要求模块默认导出的方法调用后返回对象

1module.exports = () => ({
2  foo: 'bar',
3  list: [1, 2, 3, 4, 5]
4});

文件路径：xxx/apis/demo/foo.js，会自动创建路由为 /demo/foo 的接口，支持 GET/POST/JSONP 等方法。

用法三：定义 Koa 中间件，要求模块默认导出的方法调用后返回的对象中包含 middleware 函数

1module.exports = ({ mock }) => ({
2  async middleware(ctx, next) {
3    ctx.body = {
4      foo: 'bar',
5      list: [1, 2, 3, 4, 5]
6    };
7  }
8});

文件路径：xxx/apis/demo/foo.js，会自动创建路由为 /demo/foo 的接口，支持 GET/POST 等方法。

用法四：定义 Koa 中间件、请求方法和路径（忽略文件路径），允许同时定义多个

1module.exports = ({ mock }) => ({
2  method: 'get',
3  path: '/demo/bar',
4  async middleware(ctx, next) {
5    ctx.body = {
6      foo: 'bar',
7      list: [1, 2, 3, 4, 5]
8    };
9  }
10});

创建仅支持 GET 方法，路由为 /demo/bar 的接口。

1module.exports = ({ mock }) => ([
2  {
3    method: 'get',
4    path: '/example/multiple/foo',
5    async middleware(ctx, next) {
6      ctx.body = {
7        foo: 'foo',
8        list: [1, 2, 3, 4, 5]
9      };
10    }
11  },
12  {
13    method: 'get',
14    path: '/example/multiple/bar',
15    async middleware(ctx, next) {
16      ctx.body = {
17        foo: 'bar',
18        list: [1, 2, 3, 4, 5]
19      };
20    }
21  },
22  {
23    method: 'get',
24    path: '/example/multiple/jsonp',
25    async middleware(ctx, next) {
26      ctx.jsonp = {
27        foo: 'bar',
28        list: [1, 2, 3, 4, 5]
29      };
30    }
31  }
32]);

在一个模块中同时定义多个接口路由（每个子路由都必须定义 path）。

用法五：完全自定义 Koa 路由（不能返回对象，否则和用法二冲突）

1module.exports = ({ router, mock }) => {
2  router.get('/demo/baz', (ctx, next) => {
3    ctx.body = 'Hello World!';
4  });
5};