webpack-plugin-mock

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

安装

1# npm
2npm install webpack-plugin-mock -D
3
4# yarn
5yarn add 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 配置

1 new WebpackPluginMock({
2    apiBasePath: './mock',
3    watch: true,
4    pretty: true,
5    port: 8090
6  })
7
8  port  Mock 服务的启动端口
9  config  Mock 服务的启动配置
10  apiBasePath  Mock 服务 API 目录
11  pretty  是否对 JSON Response 美化
12  watch   是否监控 API 目录文件变化

Mock 编写

用法一：定义 JSON（默认支持 mockjs 语法）

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 语法），要求模块默认导出的方法调用后返回对象

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