多种Mock服务方式提供MOCK数据，总有一种方式适合你

Mock 数据是前端开发过程中必不可少的一环，是分离前后端开发的关键链路。通过预先跟服务器端约定好的接口，模拟请求数据甚至逻辑，能够让前端开发独立自主，不会被服务端的开发所阻塞。

##安装:

yarn add @liangsky/mock --dev

##使用方式: ##mockServer 调用方式

import mockServer from '@liangsky/mock';

mockServer({ port: 9001, hostname: '0.0.0.0' });

mockServer 参数

| 属性 | 说明 | 默认值 | | --------- | --------------- | ---------- | | opts | mockServer配置参数 | 见下面opts参数 |

mockServer opts参数

| 属性 | 说明 | 默认值 | | --------- | --------------- | ---------- | | mockDir | mock文件夹所在目录 | ./ | | exclude | 用于忽略不需要走 mock 的文件 Array(string) 如：['a.ts','b.ts'] | | | hostname | 服务器地址 | 0.0.0.0 | | port | 端口号 设置的端口被占用，自动使用新端口 | 8001 | | watch | 是否监听mock文件改动 bool值 | true |

CLI 命令方式

yarn mock-server -p 8001

环境变量

| 属性 | 说明 | 默认值 | | --------- | --------------- | ---------- | | WATCH_FILES | 是否监听mock文件改动 bool值 | true |

命令参数

| 属性 | 说明 | 默认值 | | --------- | --------------- | ---------- | | -d, --dir | mock文件夹所在目录 | ./ | | -e, --exclude | 用于忽略不需要走 mock 的文件 多个路径用英文逗号分割，如：a.ts,b.ts | | | -host, --hostname | 服务器地址 | 0.0.0.0 | | -p, --port | 端口号 设置的端口被占用，自动使用新端口 | 8001 | | -w, --watch | 是否监听mock文件改动 bool值 | true |

中间件方式，迁入已有的express服务或webpack-dev-server服务中

• express服务

// @ts-ignore
import express from 'express';
import { getMiddleware } from '@liangsky/mock';

const app = express();

getMiddleware().then((middleware) => {
    app.use(middleware);

    app.get('/', (req: any, res: any) => {
        res.send('homepage');
    });

    app.listen(3000);
    console.log('look in http://localhost:3000/');
});

• webpack-dev-server服务

import type WebpackDevServer from 'webpack-dev-server';
import type Webpack from 'webpack';
import { getMiddleware } from '@liangsky/mock';

const webpackConfig: Webpack.Configuration = {
    entry: './test/app.js',
    mode: 'development',
    devServer: {
        host: '0.0.0.0',
        port: 4000,
        onBeforeSetupMiddleware: (devServer: WebpackDevServer) => {
            if (!devServer) {
                throw new Error('webpack-dev-server is not defined');
            }

            getMiddleware().then((middleware) => {
                devServer.app.use(middleware);

                devServer.app.get('/', (req, res) => {
                    res.send('homepage');
                });
                console.log('look in http://localhost:4000/');
            });
        },
    },
};
export default webpackConfig;

getMiddleware 参数

| 属性 | 说明 | 默认值 | | --------- | --------------- | ---------- | | opts | getMockMiddleware配置参数 | 见下面opts参数 |

getMiddleware opts参数

| 属性 | 说明 | 默认值 | | --------- | --------------- | ---------- | | mockDir | mock文件夹所在目录 | ./ | | exclude | 用于忽略不需要走 mock 的文件 Array(string) 如：['a.ts','b.ts'] | | | watch | 是否监听mock文件改动 bool值 | true |

getMiddleware 方法异步返回中间件middleware

| 异步返回属性 | 说明 | | --------- | --------------- | | middleware | express中间件 可用于express服务或webpack-dev-server服务中 |

约定式 Mock 文件

约定 /mock 文件夹下所有文件为 mock 文件。 约定 **/_mock.[jt]s 下所有_mock.js文件,_mock.ts文件为 mock 文件。

比如：

.
├── mock
    ├── api.ts
    └── users.ts
└── src
    └── pages
        └── index.tsx
        └── _mock.ts

/mock 下的 api.ts 和 users.ts 会被解析为 mock 文件。 /src/pages 下的 _mock.ts 会被解析为 mock 文件。

编写 Mock 文件

如果 /mock/api.ts 的内容如下，

export default {
  // 支持值为 Object 和 Array
  'GET /api/users': { users: [1, 2] },

  // GET 可忽略
  '/api/users/1': { id: 1 },

  // 支持自定义函数，API 参考 express@4
  'POST /api/users/create': (req, res) => {
    // 添加跨域请求头
    res.setHeader('Access-Control-Allow-Origin', '*');
    res.end('ok');
  },
}

然后访问 /api/users 就能得到 { users: [1,2] } 的响应，其他以此类推。