Foxman ⇗ 是一个使用 Node.js 开发的命令行工具,定位是一个可扩展的 Mock Server,帮助前端开发者轻松、独立、高效地进行前端开发和完成后续的联调工作。
他不是一款静态文件响应工具, 假如你只需要一款轻量的 Node.js 开发服务器,推荐你使用 puer ⇗ 或 webpack-dev-server ⇗。
github 地址: https://github.com/kaola-fed/foxman
背景作为前端开发的我们,在实际的开发场景中会遇到以下问题:
环境:进行本地开发,需要起后端环境(Tomcat),对于新人来说,需要大量时间熟悉;熟练的人遇到某些确实存在的问题,也要花时间去解决,耗费大量前端开发的时间;
流程:前端开发先开发 html,再将 html 改写成指定的模板语法,影响开发效率;
接口:
接口定义使用聊天工具发送,前端开发时不好理解接口字段,影响开发效率;
接口变更需要重新编写文档,并重新发送,影响开发效率;
文档散落,影响接口维护;
联调:
联调过程很复杂,尤其是没有做热部署的Java工程,改视图还需要重启Tomcat,影响前端联调效率;
效益:
前后端对接的方式,期望纯粹的 JSON 交换。不过现实情况,是依赖后端的模板引擎,导致前端理解接口存在一定的障碍;
以上问题的存在,才产生了 Foxman 这个项目。
影响从 考拉前端 使用情况来看,在接入 Foxman 后开发效率得到一定提升,主要体现在以下方面:
前端开发者不再需要在本地起 Tomcat 服务,新人也无需熟悉本地启动环境;而启动一个 Foxman 所需要的时间,在 5s 以内;
前端开发者更加有意识地去与后端定义接口,因为接口定义会落实到具体的 mock 数据上;
Mock 功能,使得前端开发者在开发阶段几乎可以是自治、无打扰的情况(产品不改需求的前提下);
Foxman 提供 Living Reload 的功能 - 页面开发过程中,修改 html 和 js 会通知浏览器 reload 页面;修改 css 会通知浏览器只 reload 样式,提升了开发体验,节省了人肉刷新耗费的时间。
Foxman 提供 Processors 的功能 - 即时编译的设定,更好地兼容无 webpack 构建的场景;
联调阶段,由于 Foxman 提供 了 Proxy 功能,使前端开发可以再本地调试模板和 javascript,避免了修改提交,再重新部署服务器的时间耗费,大大提升联调效率与体验;
核心概念容器 - Foxman 核心提供了一个挂载插件的容器,并且提供方法供插件提供或调用的服务。实现上,使用了IoC(依赖查找)、插件化等架构设计的思想。
插件 - Foxman 所有具体的功能都使用插件实现。插件的作用是实现本身需求,并提供服务供其他插件使用。
服务 - 服务是架设于 容器 与 插件 之上的概念,容器 提供方法供 插件 注册或调用服务。
在这样的体系下,你可以轻松地编写 Foxman 的插件,并调用已有插件的服务。所以,完全不需要担心,Foxman 会不适合你的项目,因为你完全可以根据自己的需求来定制你所需要的Foxman。
安装NPM
$ npm i -g foxman@lastest # 无梯子用户,推荐使用 cnpm