基于webpack的mock方案

使用 webpack-api-mocker 调整项目 mock 方案

最近在看阿里巴巴开源的飞冰的很多方案和实现,发现他们的统一 mock 方案还不错

由于他们是 client-server 的方式,做的 express 的中间件,但是我们的项目用的 webpack-devServer,所以还是找找有没有 webpack 的实现,毕竟思想是差不多的,都是拦截器,只是一个加在 exporess 里,一个加在 webpack 里。

找到了 webpack-api-mocker 这个库,看着比较不错,但是 star 比较少

使用起来比较简单,在 before 里调一下这个库,然后把 mock 配置的文件夹传进去

1
2
3
4
5
6
7
const apiMocker = require("webpack-api-mocker");
devServer: {
...
before(app) {
apiMocker(app, path.resolve("./mock/index.js"));
}
},

这个库的使用方式和飞冰的很像,没有使用 mockJS 那种自定义规则的方式,而是使用的固定的路由带参数,在方法里面去取

1
2
3
4
5
6
7
8
9
10
//index.js
const delay = require("webpack-api-mocker/utils/delay");
const noProxy = process.env.NODE_ENV !== "mock";

import test from "./test.mock.js";

const proxy = {
...test
};
module.exports = noProxy ? {} : delay(proxy, 1000);
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
//test.mock.js
export default {
"GET /api/test": {
id: 1,
username: "kenny",
sex: 6
},
"GET /api/test/list/:id/:type": (req, res) => {
const { type } = req.params;
if (type === "webpack") {
return res.status(403).json({
status: "error",
code: 403
});
}
return res.json([
{
id: 1,
username: "kenny",
sex: 6
},
{
id: 2,
username: "kenny",
sex: 6
}
]);
},
"GET /api/test/helloworld": (req, res) => {
return res.json({
text: "this is from mock server"
});
}
};

这里使用环境变量 NODE_ENV 来区分是否启用 mock 拦截,防止某些时候把服务端的 api 拦截掉

可以后续加个 util 方法,把所有的返回都包装成和服务端返回一样的结构,带有 code 和 status

这样我们后续的 mock 文件都可以写在项目下的 mock 文件夹里,api 对接完成之后也可以删掉一些不必要的 mock 引入了

如果内容对您有帮助,不妨请作者喝杯咖啡