1.1.1 • Published 3 years ago
mockplugin v1.1.1
mockplugin (支持 vue3,webpack4.0)
快速搭建项目 mock 服务的 webpack 插件,基于 mockjs
作用
通过 webpack 插件的方式,快速搭建项目的 mock 服务,用于前后端分离模式下的并行开发。
使用
安装
npm i mockplugin --save-dev
配置
在工程目录中增加一个 mock 数据存放的目录
.
├── app //工程目录
├── dist
├── config
├── src
├── mock //mock数据目录
| ├── data.js
| ├── data.json
...
在 webpack.config.js
中,配置 proxy 和 mockjs-webpck-plugin
// 引入插件
const MockPlugin = require("mockplugin");
module.exports = {
entry: "./index.js",
output: {
path: path.resolve(__dirname, "dist"),
filename: "my-first-webpack.bundle.js",
},
// 配置插件
plugins: [
// 插件的功能是根据配置文件,起一个指定端口的server,将接口请求指向json文件
new MockPlugin({
// mock数据的存放路径
path: path.join(__dirname, "./mock"),
// 配置mock服务的端口,避免与应用端口冲突
port: 3000,
}),
],
// 配置代理,这里的代理为webpack自带功能
devServer: {
// 应用端口,避免与mock服务端口冲突
port: 5001,
proxy: {
// 配置匹配服务的url规则,以及其代理的服务地址,即mock服务的地址
"/": "http://localhost:3000/",
},
},
};
如果想要给 mock 服务指定 URL 前缀,你可以在 webpack 的 proxy 设置进行如下配置:
...
module.exports = {
...
// 配置代理,这里的代理为webpack自带功能
devServer: {
// 应用端口,避免与mock服务端口冲突
port: 5001,
proxy: {
'/api': {
target: 'http://localhost:3000/',
pathRewrite: {
// 设置url的重写, 实际过程如下:
// http://localhost:5001/api/getData -> http://localhost:3000/getData
'^/api': ''
}
}
}
}
};
增加 mock 数据时,在 mock 中新建文件即可,webpack 配置无需更新,但是需要重新启动应用
参数
new MockPlugin(options);
- options.path mock 数据的存放路径
- options.port 代理服务器端口,默认为 3000
Mock 数据
Mock 数据
并非严格的 json 格式数据文件,更像是 js 代码。
当我们只需要返回直接的数据结构,使用如下的 json 格式会显得非常直接,示例data.json
如下:
/**
* Json data file
*
* @url /json/data
*
* Here you can write a detailed description
* of the parameters of the information.
*
* Parameter description and other instructions.
* uid: user ID
* name: username
* email: the email
* etc.
*/
{
"code": 0,
"result|5": [
{
"uid|+1": 1,
"name": "@name",
"email": "@email"
}
]
}
对应的文件内容可以这样理解
- 文件标题:
Json data file
- 访问路径:
/json/data
- 描述:
Here you can write a detailed description
of the parameters of the information.
Parameter description and other instructions.
uid: user ID
name: username
email: the email
etc.
- 数据: 剩下的部分
接下来我们就可以在浏览器中访问http://[localhost]:[3000]/json/data 这个地址获取数据。
除此之外,我们可以直接使用 js 文件,当我们需要校验入参时,这会很实用。
/**
* JS data file
*
* @url /js/js-data-file
*
* Export data by using the JS file directly.
*/
module.exports = {
code: function () {
// simulation error code, 1/10 probability of error code 1.
return Math.random() < 0.1 ? 1 : 0;
},
"list|5-10": [{ title: "@title", link: "@url" }],
};
或者是输出一个 function
/**
* JS function file
*
* @url /js/js-func-file/user?uid=233
*
* GET: Request method and parameter
* uid This is the requested userID
*
* Here you can write a detailed description
* of the parameters of the information.
*/
module.exports = function (req) {
var uid = req.query.uid;
if (!uid) {
return {
code: -1,
msg: "no uid",
};
}
return {
code: 0,
data: {
uid: +uid,
name: "@name",
"age|20-30": 1,
email: "@email",
date: "@date",
},
};
};
以上 mock 数据的语法均来自 mockjs
,想获取更多语法可以参阅 mockjs 官网文档和示例
mock 数据说明文档和功能来源于 52cik/express-mockjs
Mock JSON
#ChangeLog version 3.0.0 -- 2019.04.07
- 什么都没有更新! 被 npmjs 的命令
npm version <update_type>
悄咪咪升级到 3.0.0 了 version 2.0.0 -- 2019.04.06 - 增加数据文件更新热加载,如增加/删除,修改文件内容等。
支持
此插件灵感来源于 MarxJiao/mock-webpack-plugin 和 52cik/express-mockjs。
感谢两位作者 Marx(MarxJiao) 和 楼教主(52cik)。