express-hot-mock-middleware
express-hot-mock-middleware 是一个参考了 umijs 实现了其类似的基于 express 的 mock 中间件,可以方便 react 项目集成
使用时只需要指定一个到处接口数据的目录,支持实时检测目录下文件的改动并动态加载
Installation
npm install --save-dev express-hot-mock-middleware
Usage
-
使用
create-react-app
创建一个 react app -
在
src
目录下创建文件setupProxy.js
setupProxy.js 内容如下:
;const fs = ;const path = ;const proxy = ; const appPath = fs; module { const mockPaths = path ; app;};
- 在项目根目录下创建
babel.config.js
内容如下:
module { api; const presets = "react-app" // https://babeljs.io/docs/en/babel-preset-env#usebuiltins "@babel/preset-env" "useBuiltIns": "usage" "corejs": "3" // ... ; const plugins = // ... ; return presets plugins ;}
- 在项目根目录下创建
mock
目录,然后在此目录下创建一个api.js
作为示例:
; const getNotice = id: 'xxx1' title: titles0 logo: avatars0 description: '那是一种内在的东西,他们到达不了,也无法触及的' updatedAt: member: '科学搬砖组' href: '' memberLink: '' id: 'xxx2' title: titles1 logo: avatars1 description: '希望是一个好东西,也许是最好的,好东西是不会消亡的' updatedAt: '2017-07-24' member: '全组都是吴彦祖' href: '' memberLink: '' // ...; const getActivities = id: 'trend-1' updatedAt: user: name: '曲丽丽' avatar: avatars20 group: name: '高逼格设计天团' link: 'http://github.com/' project: name: '六月迭代' link: 'http://github.com/' template: '在 @{group} 新建项目 @{project}' id: 'trend-2' updatedAt: user: name: '付小小' avatar: avatars21 group: name: '高逼格设计天团' link: 'http://github.com/' project: name: '六月迭代' link: 'http://github.com/' template: '在 @{group} 新建项目 @{project}' // ...; { return res;} 'GET /api/project/notice': getNotice 'GET /api/activities': getActivities { res; } 'GET /api/tags': mockjs // ...;
License
MIT Copyright (c) 2019