使用 webpack-mock-server 给组件库添加测试服务

再过一周，我就在我厂待满三年了。其实我的职业生涯还算比较顺利，除了第一次跳槽不太好，后面每个公司都选的不错，虽然远不能满足财务自由的梦想，但是几乎都能让我在技术上有所精进，在职业上也取得一定成长。

三年期间，我们做了不少产品，为了方便在不同产品之间复用代码，我把一些公共部分抽出来做成组件，独立开发和维护，并且通过 npm + GitHub Registry 管理依赖（这个部分，前面曾写过一篇文章《使用 GitHub Registry 托管私有 NPM 源》介绍）。

有一些组件，比如登录，独立出来开发没问题，但是测试比较难搞，为了它单独开发服务器有点太兴师动众。所幸我很快就找到 webpack-mock-server，它可以很方便的定义 API 接口，只要把它加到项目中，就能很容易的完成测试了。

使用方法

1. 安装

使用 npm 安装，并且添加配置文件。安装 typescript 是因为它默认会在项目根目录里找 webpack.mock.ts，我暂时不知道怎么不用 ts 写配置。

npm install -D webpack-mock-server typescript

const webpackMockServer = require("webpack-mock-server");
 
module.exports = {
  devServer: {
    before: webpackMockServer.use
  }
}

2. 配置接口

目前这个工具只会在根目录里找 webpack.mock.ts（或者说我用的还不太熟，只会这么做），好在写 express 配置并不复杂，也不需要 ts 语法：

import webpackMockServer from "webpack-mock-server";
 
// app is expressjs application
export default webpackMockServer.add((app, helper) => {
  // you can find more about expressjs here: https://expressjs.com/
  app.get("/testGet", (_req, res) => {
    res.json("JS get-object can be here. Random int:" + helper.getRandomInt());
  });
  app.post("/testPost", (_req, res) => {
    res.json("JS post-object can be here");
  });
});

3. 检查接口

接下来，正常启动 dev-server 即可：webpack-dev-server --config=build/webpack.dev.js，然后留心控制台，会多输出一个服务网址，比如：

WebpackMockServer. Started at http://localhost:8079/

这个服务一般是 dev-server 端口 -1，比如我的 dev-server 跑在 8080，那么它就在 8079。打开之后是如下所示的接口列表：

从中可以看到所有提供服务的接口，支持什么方法，点击还能查看返回结果，非常方便。

总结

使用这个工具，可以大大提升组件库的开发效率。目前我用的也不是很熟，文档中介绍的方法还没用完，也不清楚怎么不用 ts。先推荐给大家吧。