如何在轻松的在前端项目中mock数据

打个小广告哈，最近做了个小程序，来测测你的工作性价比吧～（微信扫码打开小程序即可）

---

在前端项目中，我们经常会有需要mock数据的需求，这样我们后端的接口就不会影响我们的开发进度，大大提高开发效率。但是很多时候，mock需要的配置项都比较繁琐，我又是一个很怕麻烦的人，所以我写了一个小插件，基于webpack和webpack-dev-server的。只要几行代码，你就可以在你的项目中轻松实现数据的mock。

• 该插件目前只支持GET请求。
• 插件项目地址：happy-mock-webpack-plugin。如果对你有帮助，欢迎star。如果有bug或者有些需求需要改进，欢迎issue讨论。
• 你可以clone下项目后，参考examples文件夹中的例子。

安装

npm install happy-mock-webpack-plugin

使用

在webpack的配置文件中，加入插件:

const HappyMockMockPlugin = require('happy-mock-webpack-plugin')
const path = require('path')

module.exports = {
  // other configs
  plugins: [
    // other plugins...
    new HappyMockMockPlugin({
      root: path.resolve(__dirname, 'mock'),
      lazy: true,
      autoRefresh: true
    })
  ]
}

Mock 文件

目录结构:

- src
  - app.js
- mock
  - user
    - profile.json
    - orders.js
  - menu.js

这里的目录路径就是请求的路径，比如，如果你使用了axios，那么axios.get('/user/profile')将会请求mock/user/profile.json文件。
下面提供几种mock文件的例子：

• /mock/user/orders.js

这个js文件导出一个函数，这个函数接收两个参数: request 和 response，这两个对象来自于webpack-dev-server中，即是express中的请求和响应对象。你可以根据请求参数的不同来返回不同的结果。

module.exports = (request, response) => {
  // handle request ...
  // modify response ...
  return {
    data: []
  }
}

• /mock/user/profile.json

{
  "name": "John Doe"
}

• /mock/menu.js

module.exports = {
  items: [],
  from: 'xx'
}

其他文件都会按原样返回。

配置

• root

  String

  mock文件夹的路径，必须是一个绝对路径

• lazy

  Boolean

  如果设置成true的话，文件将会在接收到对应请求时被加载，在这种情况下，请求处理时间可能会稍微长一点，但是项目启动的时间相对设置成false时短了。

  如果设置成false的话，项目会在启动的时候就加载好所有的mock文件放入缓存中，所以项目启动时间会有所增加，但是请求的响应速度会加快。

• autoRefresh

  Boolean

  设置成true的话，只要你修改了mock文件夹下的文件，浏览器都会自动刷新以获取最新的数据。设置成false的话，你只能手动刷新来打到目的。

  注意：这个配置只有在lazy设置成true的时候起作用。如果lazy为false的话，那么优先会加载缓存，你需要重启项目才能获得更新后的mock数据。