Open ImHype opened 7 years ago
Foxman ⇗ 是一个使用 Node.js 开发的命令行工具,定位是一个可扩展的 Mock Server,帮助前端开发者轻松、独立、高效地完成前端开发和联调工作。
他不是一款静态文件响应工具, 假如你只需要一款轻量的 Node.js 开发服务器,推荐你使用 puer ⇗ 或 webpack-dev-server ⇗。
github 地址: https://github.com/kaola-fed/foxman
作为前端开发的我们,在实际的开发场景中会遇到以下问题:
以上问题的存在,才产生了 Foxman 这个项目。
从 考拉前端 使用情况来看,在接入 Foxman 后,拥有了更优雅的开发体验和更高的开发效率:
容器 - Foxman 核心提供了一个挂载插件的容器,并且提供方法供插件提供或调用的服务。实现上,使用了IoC(依赖查找)、插件化等架构设计的思想。
插件 - Foxman 所有具体的功能都使用插件实现。插件的作用是实现本身需求,并提供服务供其他插件使用。
服务 - 服务是架设于 容器 与 插件 之上的概念,容器 提供方法供 插件 注册或调用服务。
在这样的体系下,你可以轻松地编写 Foxman 的插件,并调用已有插件的服务。所以,完全不需要担心,Foxman 会不适合你的项目,因为你完全可以根据自己的需求来定制你所需要的Foxman。
NPM
$ npm i -g foxman@lastest # 无梯子用户,推荐使用 cnpm
⚠️ Foxman 采用 es6 语法的大部分特性编写,要求使用 Node.js 版本不低于 v6.4.0
module.exports = { port: 9000, secure: false, statics: [ './src/' ], routes: [ { method: 'GET', url: '/ajax/index.html', sync: false, filePath: 'foo.bar' } ], engineConfig: {}, viewRoot: './views/', extension: 'ftl', syncData: './syncData/', asyncData: './ajax/', plugins: [], processors: [ { match: '/src/css/*.css', pipeline: [], locate( reqUrl ) {} } ], proxy: [ { name: 'pre', host: 'm.kaola.com', ip: '1.1.1.1', protocol: 'http' } ] }
这是一份基础的 Foxman 的配置文件,可以发现大部分字段都给 Server 用的,比如:
以及一些特殊的字段,后面我们会重点介绍:
更详细的 Foxman 配置,点击此处 ⇗
在编写完 foxman.config 的目录下,执行命令即可启动 Foxman :
$ foxman
Foxman 的外置插件可以在配置文件中灵活载入:
... plugins: [ new RouteDisplay(), new MockControl({}), new Automount({}), new WebpackDevServer({}), ] ...
而所有的内置功能,其实也是依托于插件展开。每个 Foxman 插件,需要实现一些方法,用于装载入 Foxman 容器时,做一些登记工作:
class Plugin { constructor() { // 初始化自身需要的属性 } name() { // 定义插件的名字,如果没有该字段,会使用 constructor.name return 'name'; } service() { // 提供给其他插件的服务 return { foo() { return 'bar'; } } } init({getter, service}) { const use = service('service.use'); } }
LivereloadPlugin ⇗
容器的设定,离不开 IoC(控制反转)的概念。
实现 IoC,惯用的一种方案是依赖注入 (Dependency Injection) ,用于运行时被动地接收依赖的对象,早期的 Foxman 是根据 DI 的方式实现插件化的;
另一种方案是依赖查找 (Dependency Lookup) - 与 DI 相比更加主动,主动得调用框架提供的方法来获取依赖,获取时提供相关的配置文件路径 或 keypath 等信息。
Foxman 核心提供了 use 和 start 两个方法:
// core.js class Core { use() { // 1. 注册 Plugin 进入容器; // 2. 在容器中登记 Plugin 提供的 service } start() { // 1. 循环 Plugin 执行 init 方法, 注入 getters, service 等方法,用于获取其他插件的配置或是服务 // 2. 如果插件执行了 this.pending 方法,则等待异步操作完成。 } }
// app.js const core = new Core(); core.use(new Plugin({})); // 1. 执行 Plugin constructor // 2. 注册 Plugin 进入容器 // 3. 在容器中登记 Plugin 提供的 service core.start(); // 执行 Plugin 的 init 方法,会在参数中注入的 getters 和 service 方法,用于插件依赖查找,
具体的实现细节,感兴趣的同学可以 查看源码 ⇗
基于 Node.js Server 框架 koa@1.x 构建,Server 的职责便是渲染模板、响应异步数据,以及在页面插入一些特定的脚本。
整个 Server 的启动分为三个阶段:
在 Server 启动后,请求进入 Server 时,会经历中间件的处理,这个过程又能分为 3 个阶段:
Server模块 提供其他插件一些关于 Server 相关的服务,可以供其他插件调用,比如:
Foxman 的内置的 Mock Data 编写方式使用最原始的 JSON 字符串。 有特殊需求可以使用插件 @foxman/plugin-mockcontrol ⇗ 对响应进行额外控制,也可以在此基础上使用 MockJS,对响应数据进行控制。
模板解析模块,具有特定接口,完成模板渲染需求。
var engine = require('@foxman/engine-arttemplate'); ... engine: engine, engineConfig: { // 取决于具体的模板引擎 bail: true, compileDebug: true, imports: renderImports, debug: false, cache: false, } ...
目前支持的模板引擎有:
假如没有你需要的,你也可以自行开发一款 Foxman 的模板引擎解析器,只需要实现一个特定的接口,基本结构如下。
const template = require('xxx-template'); class TemplateEngin { constructor(viewRoot, engineConfig) { // 初始化配置 } parse(path, mockData) { // 返回一个 Promise,Promise 的返回是处理后的接口 return Promise.resolve(template(path, mockData)); } }
具体实现,参考 @foxman/engine-arttemplate ⇗
使用本地的模板,结合远程端的数据来拼装页面。
代理的原理:
代理的设定,使得我们可以在本地的环境下调试测试环境的场景,发现存在前端的 bug 也能轻松修复,不再需要重复的部署测试服务器。
来接触下 Foxman Proxy 的实际配置:
... proxy: [{ name: 'pre', host: 'm.kaola.com', // 用于 nginx 转发到制定应用 ip: '1.1.1.1', // 目标的 IP 地址 protocol: 'http' // 协议 }] ...
完成上述配置后,使用者输入以下命令启动 Foxman,即可代理至远程服务器
$ foxman -P pre # pre 为 配置的 proxy name
Processors 是 Runtime Compiler 的设定,在接收到静态资源请求时,才去即时地编译前端资源(sass/less/mcss/autoprefixer),主要目的是兼容无 webpack 构建的开发场景。如已使用 webpack,则推荐使用插件 @foxman/plugin-webapck-dev-server
举例介绍 mcss 的即时编译配置
const Mcss = require('@foxman/processor-mcss'); const AutoPrefixer = require('@foxman/processor-autoprefixer'); ... processors: [ { match: '/src/css/**.css', // 拦截该请求 pipeline: [ // pipe 式的处理 new Mcss({ paths: [] }), new AutoPrefixer({ cascade: false, browsers: '> 5%' }) ], locate(reqPath) { // 根据请求路径,定位到在系统中具体路径 return path.join(__dirname + reqPath.replace(/css/g, 'mcss')); } } ], ...
假如没有你需要的,你也可以自行开发一款 Foxman 的 Processor ,只需要实现一个特定的接口,基本结构如下:
const mcss = require('mcss'); class Processor { constructor(options) { // 初始化解析器的参数 } locate(reqPath) { // 根据请求路径找到文件在系统中的位置 return reqPath.replace(/\.css$/g, '\.mcss'); } *handler({ raw, filename }) { return yield new Promise((resolve, reject) => { // 在这里 进行 parse 操作,如 sass | less 的解析操作 return { dependencies, content // 该文件依赖,及内容 } }) } }
具体实现,参考 @foxman/processor-mcss ⇗
最后,如果你对 Foxman 的设计有那么点好感,或者是感兴趣,欢迎一起参与到开发当中。
感谢阅读!
没有看明白proxy配置的具体作用,最近可能要用到代理的功能,想详细了解一下
title: Foxman, 基于微核架构的 Mock 解决方案 date: 2017-05-26
Foxman ⇗ 是一个使用 Node.js 开发的命令行工具,定位是一个可扩展的 Mock Server,帮助前端开发者轻松、独立、高效地完成前端开发和联调工作。
他不是一款静态文件响应工具, 假如你只需要一款轻量的 Node.js 开发服务器,推荐你使用 puer ⇗ 或 webpack-dev-server ⇗。
github 地址: https://github.com/kaola-fed/foxman
背景
作为前端开发的我们,在实际的开发场景中会遇到以下问题:
以上问题的存在,才产生了 Foxman 这个项目。
影响
从 考拉前端 使用情况来看,在接入 Foxman 后,拥有了更优雅的开发体验和更高的开发效率:
核心概念
容器 - Foxman 核心提供了一个挂载插件的容器,并且提供方法供插件提供或调用的服务。实现上,使用了IoC(依赖查找)、插件化等架构设计的思想。
插件 - Foxman 所有具体的功能都使用插件实现。插件的作用是实现本身需求,并提供服务供其他插件使用。
服务 - 服务是架设于 容器 与 插件 之上的概念,容器 提供方法供 插件 注册或调用服务。
在这样的体系下,你可以轻松地编写 Foxman 的插件,并调用已有插件的服务。所以,完全不需要担心,Foxman 会不适合你的项目,因为你完全可以根据自己的需求来定制你所需要的Foxman。
安装
NPM
⚠️ Foxman 采用 es6 语法的大部分特性编写,要求使用 Node.js 版本不低于 v6.4.0
编写配置文件
这是一份基础的 Foxman 的配置文件,可以发现大部分字段都给 Server 用的,比如:
以及一些特殊的字段,后面我们会重点介绍:
更详细的 Foxman 配置,点击此处 ⇗
启动
在编写完 foxman.config 的目录下,执行命令即可启动 Foxman :
设计理念
插件体系
Foxman 的外置插件可以在配置文件中灵活载入:
而所有的内置功能,其实也是依托于插件展开。每个 Foxman 插件,需要实现一些方法,用于装载入 Foxman 容器时,做一些登记工作:
LivereloadPlugin ⇗
容器与依赖查找
容器的设定,离不开 IoC(控制反转)的概念。
实现 IoC,惯用的一种方案是依赖注入 (Dependency Injection) ,用于运行时被动地接收依赖的对象,早期的 Foxman 是根据 DI 的方式实现插件化的;
另一种方案是依赖查找 (Dependency Lookup) - 与 DI 相比更加主动,主动得调用框架提供的方法来获取依赖,获取时提供相关的配置文件路径 或 keypath 等信息。
Foxman 核心提供了 use 和 start 两个方法:
具体的实现细节,感兴趣的同学可以 查看源码 ⇗
功能模块
Server模块
整个 Server 的启动分为三个阶段:
在 Server 启动后,请求进入 Server 时,会经历中间件的处理,这个过程又能分为 3 个阶段:
Server模块 提供其他插件一些关于 Server 相关的服务,可以供其他插件调用,比如:
Foxman 的内置的 Mock Data 编写方式使用最原始的 JSON 字符串。
有特殊需求可以使用插件 @foxman/plugin-mockcontrol ⇗ 对响应进行额外控制,也可以在此基础上使用 MockJS,对响应数据进行控制。
Template 渲染引擎
目前支持的模板引擎有:
假如没有你需要的,你也可以自行开发一款 Foxman 的模板引擎解析器,只需要实现一个特定的接口,基本结构如下。
具体实现,参考 @foxman/engine-arttemplate ⇗
Proxy
代理的原理:
代理的设定,使得我们可以在本地的环境下调试测试环境的场景,发现存在前端的 bug 也能轻松修复,不再需要重复的部署测试服务器。
来接触下 Foxman Proxy 的实际配置:
完成上述配置后,使用者输入以下命令启动 Foxman,即可代理至远程服务器
Processors
举例介绍 mcss 的即时编译配置
假如没有你需要的,你也可以自行开发一款 Foxman 的 Processor ,只需要实现一个特定的接口,基本结构如下:
具体实现,参考 @foxman/processor-mcss ⇗
关于贡献者
君羽
💻 🔌 🚇 📖 ⚠️ 🐛 💡
MO
💻 🔌 🚇 📖 ⚠️ 🐛
froguardoge
💻 🔌 📖
结尾
最后,如果你对 Foxman 的设计有那么点好感,或者是感兴趣,欢迎一起参与到开发当中。
感谢阅读!