详解如何优雅在webpack项目实现mock服务器

为什么需要 mock

至于平时开发为什么需要 mock 数据，应该大多数的同学都非常清楚了；如果前后端同步开发的话，少不了这一步，在需求评审，技术评估等流程通过后，前后端就会约定接口 api 的字段（但是在部分公司可能会少了这一步），确认接口 api 字段约定之后，前端就可以通过 mock server 去 mock 数据进行开发了，不需要等后端开发完 api 接口再去对接，但是有些同学在开发的过程中经常已经把 ui 弄好了，就在苦苦等后端大哥的接口...白白浪费了不必要的时间，如果可以自己 mock 数据开发，那等后端接口都好了只需要把域名或者接口前缀换一下再联调一下就万事大吉了。

mock 数据的方式

json schema

有些同学喜欢在代码里面用 json schema 的形式去 mock 数据，比如：

export function xhr(params = {}) {
  if (process.env.NODE_ENV === "development" && useMock) {
    return delay(2000).then(() => Promise.resolve(require("./mock/list.json")));
  }
  return request({
    url: "xxxxx",
    method: "POST",
  });
}
function delay(ms = 2000) {
  return new Promise((resolve) => {
    setTimeout(() => {
      resolve();
    }, ms);
  });
}

优点：简单。

缺点：第一，需要侵入逻辑代码里面；第二，没办法真正的模拟 ajax 请求，因为这种 mock 是不会发起 http 请求的；第三，不能获取传递的参数去做对应的事情；第四，不能修改 http 的状态；第五，打包项目的时候还会被打包进 bundle。

结论：缺点明显大于优点。

可视化的 mock

市面上有很多可视化的 mock api 方案，比如 apiFox。

优点：ApiFox 集成了 Postman + Swagger + Mock + JMeter，是一款做得比较的好的可视化 mock 解决方案。

缺点：如果只有前端团队在单独使用，就有点大材小用没必要，如果是前后端测试都同时在使用的话，那就是一个不错的选择。

结论：ApiFox 更像一个团队协作的 mock 工具。

在 webpack 实现 mock server 需要的知识

如果要自己在 webpack 项目的搭建一个定制化的 mock server 需要如下的知识点。

• 一点点的 webpack 知识
• 一点点的 node 知识

很简单的啦！

实现 webpack mock server

小试牛刀

在 webpack 中实现定制化的 mock server ，需要借助 webpack-dev-server，也就是 webpack 配置下 devServer 字段。该字段下提供了一个onBeforeSetupMiddleware的一个钩子，回调参数里面为我们提供了一个app参数，参数是一个 node 的服务。

既然知道了app是一个 node 服务，那让我们小试牛刀一下（很快不疼，一下就过去了