webpack-mock-service

提供api mock服务，可配合webpack-dev-server使用，也可单独使用

V3版本开始不再需要提供入口文件，程序会自动导入mock文件夹下符合条件的文件

安装

$ npm install webpack-mock-service

使用

webpack.config.js

const path = require('path')
const MockService = require('webpack-mock-service').default

module.exports = {
  // ...
  devServer: {
    // ...
    before(app) {
      new MockService(app, {
        directory: path.join(process.cwd(), 'mock'), // default
        excludeApis: '/exclude',
        baseUrl: '/api'
      })
    },
    // '/api/exclude'和'/api/nomatch'将会被转发到'http://api.example'
    proxy: {
      '/api': {
        target: 'http://api.example',
        changeOrigin: true
      }
    }
  }
}

mock/index.js

module.exports = {
  'GET /test': {
    delay: 1000,
    response: {
      message: 'Response from mock service.'
    },
  },
  'POST /exclude': {
    response(req, res) {
      res.send('Response from mock service.')
    },
  },
}

参数说明

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文件的缓存，确保拿到最新数据。