webpack-mock-service
提供api mock服务,可配合webpack-dev-server
使用,也可单独使用
V3版本开始不再需要提供入口文件,程序会自动导入mock文件夹下符合条件的文件
安装
$ npm install webpack-mock-service
使用
webpack.config.js
const path = const MockService = default moduleexports = // ... devServer: // ... { app directory: path // default excludeApis: '/exclude' baseUrl: '/api' } // '/api/exclude'和'/api/nomatch'将会被转发到'http://api.example' proxy: '/api': target: 'http://api.example' changeOrigin: true
mock/index.js
moduleexports = 'GET /test': delay: 1000 response: message: 'Response from mock service.' 'POST /exclude': { res }
参数说明
MockOptions
Param | Type | Default | Description |
---|---|---|---|
directory |
string |
path.join(process.cwd(), 'mock') |
mock文件夹绝对路径 |
useSubdirectories |
boolean |
true |
是否使用子目录 |
filter |
RegExp\|((filepath: string) => boolean) |
/\.js(on)?$/ |
文件过滤器 |
watchPaths |
string\|string[] |
- |
需要监测变化的文件/文件夹,作为第一个参数传递给chokidar.watch ,默认为directory 的值 |
watchOptions |
object |
- |
作为第二个参数传递给chokidar.watch |
middlewares |
express.Handler[] |
- |
中间件 |
baseUrl |
string |
/ |
api基础路径 |
includeApis |
string\|RegExp\|Array<string\|RegExp> |
* |
包含的api接口 |
excludeApis |
string\|RegExp\|Array<string\|RegExp> |
- |
排除的api接口 |
fallthrough |
boolean |
true |
没有匹配到api接口时,是否把请求交给下一个中间件处理 |
updateDelay |
number |
2000 |
文件改动后更新mock服务的延迟时间(ms),用于防抖。此外,很多编辑器在保存的时侯是先把原文件清空,再进行保存,因此会触发2次文件改变事件,设置该值也可以解决这个问题 |
MockResponse
Key | Type | Default | Description |
---|---|---|---|
response |
unknown[]\|Record<string, unknown>\|express.Handler |
- |
响应数据或处理请求的函数 |
delay |
number |
- |
响应等候时间(ms) |
status |
number |
200 |
HTTP状态码 |
热更新
默认情况下,监测到文件变化时只会清除改动文件本身的缓存。当这个文件不会影响到其他mock文件的输出时,这么做是没问题的。否则,务必使文件名以_
开头,这样会清除所有已加载的mock文件的缓存,确保拿到最新数据。