express-hot-mock-middleware

express-hot-mock-middleware 是一个参考了 umijs 实现了其类似的基于 express 的 mock 中间件，可以方便 react 项目集成

使用时只需要指定一个到处接口数据的目录，支持实时检测目录下文件的改动并动态加载

Installation

1npm install --save-dev express-hot-mock-middleware

Usage

1. 使用 create-react-app 创建一个 react app

2. 在 src 目录下创建文件 setupProxy.js

setupProxy.js 内容如下：

1require('@babel/register');
2const fs = require('fs');
3const path = require("path");
4const proxy = require('http-proxy-middleware');
5
6const appPath = fs.realpathSync(process.cwd());
7
8module.exports = function (app) {
9
10    const mockPaths = [
11        path.join(appPath, 'mock')
12    ];
13
14    app.use(require("express-hot-mock-middleware").createMiddleware(mockPaths));
15};

3. 在项目根目录下创建 babel.config.js 内容如下：

1module.exports = function (api) {
2    api.cache(true);
3
4    const presets = [
5        "react-app",
6        [
7            // https://babeljs.io/docs/en/babel-preset-env#usebuiltins
8            "@babel/preset-env",
9            {
10                "useBuiltIns": "usage",
11                "corejs": "3"
12            }
13        ],
14        // ...
15    ];
16    const plugins = [
17        // ...
18    ];
19
20    return {
21        presets,
22        plugins
23    };
24}

4. 在项目根目录下创建 mock 目录，然后在此目录下创建一个 api.js 作为示例：

1import mockjs from 'mockjs';
2
3const getNotice = [
4    {
5        id: 'xxx1',
6        title: titles[0],
7        logo: avatars[0],
8        description: '那是一种内在的东西，他们到达不了，也无法触及的',
9        updatedAt: new Date(),
10        member: '科学搬砖组',
11        href: '',
12        memberLink: '',
13    },
14    {
15        id: 'xxx2',
16        title: titles[1],
17        logo: avatars[1],
18        description: '希望是一个好东西，也许是最好的，好东西是不会消亡的',
19        updatedAt: new Date('2017-07-24'),
20        member: '全组都是吴彦祖',
21        href: '',
22        memberLink: '',
23    },
24    // ...
25];
26
27const getActivities = [
28    {
29        id: 'trend-1',
30        updatedAt: new Date(),
31        user: {
32            name: '曲丽丽',
33            avatar: avatars2[0],
34        },
35        group: {
36            name: '高逼格设计天团',
37            link: 'http://github.com/',
38        },
39        project: {
40            name: '六月迭代',
41            link: 'http://github.com/',
42        },
43        template: '在 @{group} 新建项目 @{project}',
44    },
45    {
46        id: 'trend-2',
47        updatedAt: new Date(),
48        user: {
49            name: '付小小',
50            avatar: avatars2[1],
51        },
52        group: {
53            name: '高逼格设计天团',
54            link: 'http://github.com/',
55        },
56        project: {
57            name: '六月迭代',
58            link: 'http://github.com/',
59        },
60        template: '在 @{group} 新建项目 @{project}',
61    },
62    // ...
63];
64
65function getFakeCaptcha(req, res) {
66    return res.json('captcha-xxx');
67}
68
69export default {
70    'GET /api/project/notice': getNotice,
71    'GET /api/activities': getActivities,
72    'POST /api/forms': (req, res) => {
73        res.send({message: 'Ok'});
74    },
75    'GET /api/tags': mockjs.mock({
76        'list|100': [{name: '@city', 'value|1-100': 150, 'type|0-2': 1}],
77    }),
78    // ...
79};

License

MIT Copyright (c) 2019