proxy-mock-middleware
v1.0.6
Published
基于express 搭建前端代理以及本地模拟服务,方便前端开发
Downloads
5
Maintainers
Readme
proxy-mock-middleware
基于express 搭建前端代理以及本地模拟服务,方便前端开发。
使用背景
在前后端协同开发过程中,最多的就是数据联调。此中间件可以后端接口还没开发完时,能在本地快速模拟数据,而且接口与后台完全一制而不用在真正联调时还需要修改url,造成没必要的bug。同时,如果项目还依赖其他远程工程的服务(部署在公共的开发测试环境服务),可以启动代理,这样,前端就可以只运行前端工程而不用本地起后端服务。
本插件可以应用于gulp构建工具,也可以应用于webpack打包工具,只需要几个小小的配置就能轻松使用。
使用手册
- 安装
npm install proxy-mock-middleware --save-dev
- 使用
1.在项目的根目录创建一个配置文件,命名为pmm.config.js
,其中包含服务代理配置 以及本地模拟数据配置。如下所示:
pmm.config.js
//服务器配置
const svrConfig = {
host: "127.0.0.1",//必须配置项
port: 3000,//必须配置项
mockenable: true,
buildTool:"webpack",//必须配置项,使用的构建工具名称,只能是'webpack'或'gulp'
staticFolder: "dist",//静态资源托管目录,buildTool参数为‘gulp’时才配置
webpackCfgName: "webpack.dev.config.js"//webpack的开发配置文件,buildTool参数为‘webpack’时才配置
};
//代理配置,可以同时多个代理,可以为空数组
const proxyConfig = [{
enable : true,//是否代理
router: "/uitemplate_web",//代理目录
url: "http://workbenchdev.yyuap.com"//代理远程地址
}]
//本地模拟配置
const mockConfig = {
"GET": [{
"/react-gulp-es6/myrepo/getMyRepo": "./mock/myRepo/getMyRepo.json"
},
{
"/react-gulp-es6/webAddress/getAddress": "./mock/webAddress/getAddress.json"
}],
"POST": [{
}]
};
module.exports = {
svrConfig: svrConfig,
proxyConfig: proxyConfig,
mockConfig : mockConfig
};
配置说明:
svrConfig配置
- host:主机名(必须项)
- port:端口号(必须项)
- mockenable:是否启用本地模拟服务(可选项,默认为false,true为启用)
- buildTool:使用的构建工具名称,只能是'webpack'或'gulp'(必须项)
- proName:一般为项目名称,为静态资源目录指定一个挂载路径(可选),访问静态资源是前头需要加上proName
- staticFolder:静态资源托管目录,buildTool参数为‘gulp’时才配置(gulp工具时必须项)
- webpackCfgName: webpack的开发配置文件,buildTool参数为‘webpack’时才配置(webpack工具时必须项)
proxyConfig配置
可以配置多个代理,每个代理有三个参数:
- enable: 是否代理(true启用代理)
- router: 代理目录
- url: 代理远程地址
mockConfig配置
可以配置GET、POST、PUT、DELETE 或其他任何 http 模块支持的 HTTP 请求。
其中本地模拟配置中需要注意的是"/bd/materialclass/list"
表示真实的接口地址,"./mock/list.json"
为本地接口数据的json文件
2.配合工具使用
- 配合gulp使用:
在gulpfile.js
中引用该插件,如下所示:
var pmm = require('proxy-mock-middleware');
然后配置一个gulp任务,用来执行它的start方法启动服务,如下:
gulp.task('dev-server', function () {
pmm.start()
});
具体例子可以查看下面测试工程里头的配置。
- 配合webpack使用:
第一步,不需要配置webpack中的devServer,只保留webpack的打包功能,因为devServer的配置其实是供webpack-dev-server使用,而它主要是启动了一个使用express的Http服务器。本插件proxy-mock-middleware也是启动一个Http服务器,所以不需要重复启用。
第二步:全局安装proxy-mock-middleware
npm install proxy-mock-middleware -g
这样做其实是可以提供此插件里头的命令pmm-server(启动proxy-mock-middleware服务)。
webpack项目使用示例如下:
例如项目结构如下:
├── README.md
├── app
├── assets
├── json
├── package-lock.json
├── package.json
├── pmm.config.js
├── postcss.config.js
├── public
├── webpack.config.js
└── webpack.pro.config.js
webpack.config.js(简单配置了下,在这里重点是为了强调不需要启用webpack-dev-server)如下:
const webpack = require("webpack");
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports={
devtool:'eval-source-map',//便于开发环境找错误位置,eval-source-map只用于开发环境
entry:__dirname+"/app/index.js",//唯一的入口文件
output:{
path:__dirname+"/public",//产出文件所在的位置
filename:"build.js"//产出文件的文件名
},
//不需要启用devServer
/* devServer:{
contentBase:'./public',//本地服务器所加载的页面所在的目录,
port:8888,
inline:true,//实时刷新,
hot:true
}, */
module:{
rules:[
{
test:/(\.js|\.jsx)$/,
exclude:/node_modules/,
use:'babel-loader'
},
{
test:/\.css$/,
use:['style-loader','css-loader']
},
{
test:/\.json$/,
use:'json-loader'//新版本webpack要求配置文件中不能省略‘-loader’
},
{
test:/\.less$/,
use:['style-loader','css-loader','less-loader','postcss-loader']
},
{
test:/\.html$/,
use:'html-loader'
}
]
},
plugins:[new HtmlWebpackPlugin({
template: __dirname + "/app/index.tmpl.html"//生产index.html模版文件
}),
/* 在开发环境中配置通过配置HMR 以提高开发效率*/
new webpack.HotModuleReplacementPlugin()]
}
pmm.config.js的配置如下:
const svrConfig = {
host: "127.0.0.1",
port: 3000,
mockenable: false,
buildTool:'webpack',
webpackCfgName: "webpack.config.js"
};
const proxyConfig = [
/* {
enable : false,
router: "/test",
url: ""
}, */
]
const mockConfig = {
"GET": [{
},
{
}],
"POST": [{
}]
};
module.exports = {
svrConfig: svrConfig,
proxyConfig: proxyConfig,
mockConfig : mockConfig
};
运行pmm-server
启动http服务就可以正常访问资源了。
具体例子可以看下面测试工程的例子。
测试
- 下载源码:
git clone https://github.com/Magicwager/proxy-mock-middleware.git
- 进入测试目录:
cd proxy-mock-middleware/test
- 安装依赖包:
npm install
- 启动测试工程:
测试webpack工程输入
npm run webpack-pmmtest
浏览器直接打开可看效果
测试gulp工程输入
npm run gulp-pmmtest