腾讯IVWEB前端工程化工具feflow思考与实践
本篇文章主要介绍腾讯IVWEB团队从0到1在工程化的思考和实践。feflow的全称是Front-end flow(前端工作流),致力于提升研发效率和规范的工程化解决方案。愿景是通过feflow,可以使项目创建、开发、构建、规范检查到最终项目上线的整个过程更加自动化和标准化。
要解决的问题
- 项目的目录结构按约定生成
- 团队有一套开发规范进行约束
- 支持多种类型的构建,包括Fis构建和webpack构建
- 团队内部的代码贡献统计、离线包内置App等
为了解决上述问题,我们于17年2月底开始投入工程化feflow工具的开发和相关规范的制定,目前已经研发出了 feflow 的 CLI 版本,后续会推出 GUI 版本。
架构设计
为了让 feflow 的具有高可扩展性,我们设计了4层结构,分别是:插件生态、内核层、参数解析器和控制台。除了贯穿整个开发工作流的基础命令选择通过内部插件内置在CLI 的Core里面,其它非必要命令统一通过插件机制进行扩展。
另一方面,为了使得 feflow 能够适用多种类型的项目。我们开发了多种类型的业务脚手架,如:活动模板、App H5模板、RN模板和业务组件模板。
执行过程
当用户在控制台里面输入某个命令。首先会通过CLI 的参数解析器,将这个命令解析成一个object对象,然后传递给CLI 的内核。所有的命令都是通过内核上下文提供的 register 函数 进行注册的,一方面内核自身会读取内置插件 注册的基础命令,另一方面,内核会读取本地已经安装的外部插件注册的命令。如果找到用户输入的命令则开始执行命令对应的回调函数。
基础命令设计
# 初始化项目
$ feflow init
# 本地开发
$ feflow dev
# 代码质量检查
$ feflow lint
# 打包构建
$ feflow build
# 代码发布
$ feflow publish
# 安装插件、脚手架等
$ feflow install package
# 配置本地客户端,如: npm 的源和 proxy
$ feflow config <key> <value>
前面提到,CLI 的命令包含两部分,分别是内置在内核里的基础命令和外部插件提供的命令。那么外部插件要如何设计呢?
插件机制设计
插件实现原理
这里有一个非常巧妙的设计,通过使用node提供的module和vm模块,可以通注入feflow全局变量来访问到cli的实例。从而能够访问cli上的各种属性,比如config, log和一些helper等。
loadPlugin(path, callback) {
const self = this;
return fs.readFile(path).then((script) => {
const module = new Module(path);
module.filename = path;
module.paths = Module._nodeModulePaths(path);
function require(path) {
return module.require(path);
}
require.resolve = function(request) {
return Module._resolveFilename(request, module);
};
require.main = process.mainModule;
require.extensions = Module._extensions;
require.cache = Module._cache;
// Inject feflow variable
script = '(function(exports, require, module, __filename, __dirname, feflow){' +
script + '});';
const fn = vm.runInThisContext(script, path);
return fn(module.exports, require, module, path, pathFn.dirname(path), self);
}).asCallback(callback);
}
命令注册:
命令需要以feflow.cmd.register进行注册,比如:
feflow.cmd.register('deps', 'Config ivweb dependencies', function(args) {
console.log(args);
// Plugin logic here.
});
说明:
- register有3个参数,第一个是子命令名称,第二个是命令描述说明信息,第三个是对应的子命令执行逻辑函数。
- feflow会将命令行参数args解析成Object对象,传递给插件处理函数
配置
可以通过feflow.version获取当前feflow的版本,feflow.baseDir 获取feflow跟目录(在用户目录下的.feflow),通过feflow.pluginDir 获取插件目录
日志
通过feflow.log来进行相关命令行日志输出
const log = feflow.log;
log.info() // 提示日志,控制台中显示绿色
log.debug() // 调试日志, 命令行增加--debug可以开启,控制台中显示灰色
log.warn() // 警告日志,控制台中显示黄色背景
log.error() // 错误日志,控制台中显示红色
log.fatal() // 致命错误日志,,控制台中显示红色
安装
插件开发完成后,可以通过 feflow 提供的 install 命令安装插件。安装的插件会放置在本地客户端 ~/.feflow/node_modules 文件夹下,并且写入到 ~/.feflow/package.json 中
$ feflow install feflow-plugin-xxx // 安装某个插件
之后每次运行命令时,便会从本地加载插件所注册的命令
全量更新和增量更新
当CLI发布了一个新的版本,可能我们会废弃掉某些功能或者提供了新功能。这个时候如果用户依然使用的是旧版本,由于某些服务已经废弃掉了则会报错。在这种新旧版本不兼容的情况下,如何强制用户进行CLI的升级呢?需要在运行命令之前检查本地的CLI是否和远程提供的新版本是否兼容。在新旧版本不兼容时,会强制全量更新。如何判断当前用户安装的本地版本和远程最新版本是否兼容呢?
这里非常巧妙的运用了一下 npm 的 registry机制,每次发布新版本,我们会在 package.json 里面新增一个自定义字段 compatibleVersion,它的值是一个 semver 的版本号。本地检查时,会读取本地已经安装的版本和远程最新的版本进行比较,看看是否满足 compatibleVersion 的要求。如果不满足,则会自动运行 npm install feflow-cli
到最新的版本。
"configs": {
"compatibleVersion": ">=0.13.0"
},
对于插件,采取的是增量更新机制。每个发布到 npm 上的插件的package.json 中同样会有上面的这个字段,对于本地安装的不兼容的插件列表,会采取增量更新。
多类型脚手架的架构设计
项目拷贝存在的问题显而易见,大致有以下三个方面:
- 容易出错;一旦某个关键文件拷贝丢失或者错误,很可能需要耗费半天到一天的时间排查环境问题。
- 不同场景下对目录结构要求不同;平时开发过程中,工程通常会分为运营活动、Hybrid业务、入口级别的项目(对性能和体验有极致和苛刻的要求)。需要基于RN或者Node.js的首屏直出,还有常用的业务组件等的开发。
- 新的Feature和BugFix难以同步;某个同学开发过程中增加的新方法或者解决的bug很难传递给其它同学并且沉淀成经验积累下来。
社区里面提供了完美的Yeoman解决方案,它是为了自动化项目的创建而生。Yeoman创建项目包括以下几个阶段:
- initializing: 初始化一些状态之类的,通常是和用户输入的 options 或者 arguments 打交道
- prompting: 和用户交互的时候(命令行问答之类的)调用
- configuring: 保存配置文件(如 .babelrc 等)
- writing: 生成模板文件
- install: 安装依赖
- end: 结束部分,初始代码自动提交
我们只需要继承Yeoman的Generator类做模板定制化,基于Yeoman的脚手架设计思路应该如下图所示:
当开发者输入 feflow init 命令时,开发者会告诉CLI需要创建哪一种类型的项目,CLI收到命令后。从本地已经安装的Yeoman脚手架里面选择某种类型的模板。然后,CLI会调用Gitlab API在远程创建仓库并且授予开发者master权限。接下来,会根据实际业务场景需要,自动化申请一些打点信息,常见的如离线包id,监控告警id等等。之后,在本地目录生成代码并且安装项目依赖的npm包,最后将本次初始化生成的所有代码自动提交到远程Git仓库。
多类型主流构建支持
为了让feflow 支持多种类型的构建环境,比如 Fis3 和 webpack,或者前不久刚推出的号称零配置成本的 Parcel 构建。在每个项目的跟目录会放置一份配置文件,名称为 feflow.json。它的配置可能是这样的:
{
"builderType": "builder-webpack3",
"builderOptions": {
"moduleName": "mobile",
"bizName": "category",
"minifyHTML": true,
"minifyCSS": true,
"minifyJS": true,
"usePx2rem": true,
"remUnit": 100,
"remPrecision": 8,
"inject": true,
"port": 8001
}
}
builderType为构建的npm包,builderOptions为构建的参数配置。
最后
腾讯IVWEB团队的工程化解决方案feflow已经开源:Github主页:https://github.com/feflow/feflow
如果对您的团队或者项目有帮助,请给个Star支持一下哈~
腾讯IVWEB前端工程化工具feflow思考与实践的更多相关文章
- 前端开发工具vue.js开发实践总结
最近有很长时间没有更新博客了,换了公司,全部的心思都放在项目上了.通过这次项目的上线,让我感受最深的是前后端分离后,前端页面的模块化管理,以及前端页面的数据邦定.在接触vue.js之前,我之前端要用到 ...
- gulp前端工程化教程
gulp npm install -g gulp-concat 文件打包 npm install -g gulp-rename 文件重命名 npm install -g gulp-imagemin 图 ...
- 10分钟学会前端工程化(webpack4.0)
一.概要 1.1.前端工程化 随着前端的不断发展与壮大,前端变得越来越复杂,组件化.模块化.工程化.自动化成了前端发展中不可或缺的一部分,具体到前端工程化,面临的问题是如何提高编码->测试-&g ...
- 前端工程化系列[04]-Grunt构建工具的使用进阶
在前端工程化系列[02]-Grunt构建工具的基本使用和前端工程化系列[03]-Grunt构建工具的运转机制这两篇文章中,我们对Grunt以及Grunt插件的使用已经有了初步的认识,并探讨了Grunt ...
- 前端工程化系列[03]-Grunt构建工具的运转机制
在前端工程化系列[02]-Grunt构建工具的基本使用这篇文章中,已经对Grunt做了简单的介绍,此外,我们还知道了该如何来安装Grunt环境,以及使用一些常见的插件了,这篇文章主要介绍Grunt的核 ...
- TFC2017 腾讯Web前端大会参会小结
简述 上周有幸参加TFC腾讯Web前端大会,见识了各路前端大神的精彩演讲,干货满满的.会议流程分为上午主会场,以及下午的三个分会场.分享的主题涵盖Web新技术.Node.js.框架.工程化. 图形处理 ...
- 公司内部技术分享之Vue.js和前端工程化
今天主要的核心话题是Vue.js和前端工程化.我将结合我这两年多的工作学习经历来谈谈这个,主要侧重点是前端工程化,Vue.js侧重点相对前端工程化,比重不是特别大. Vue.js Vue.js和Rea ...
- 前端如何真正晋级成全栈:腾讯 Serverless 前端落地与实践
Serverless 是当下炙手可热的技术,被认为是云计算发展的未来方向,拥有免运维.降低开发成本.按需自动扩展等诸多优点.尤其是在前端研发领域,使用 Node 开发云函数,可以让前端工程师更加专注于 ...
- 前端构建工具之gulp(一)「图片压缩」
前端构建工具之gulp(一)「图片压缩」 已经很久没有写过博客了,现下终于事情少了,开始写博吧 今天网站要做一些优化:图片压缩,资源合并等 以前一直使用百度的FIS工具,但是FIS还没有提供图片压缩的 ...
随机推荐
- 关于Struts传递json给easyui的随笔
今天在公司写测试代码,由于公司用的是ssh框架做的商城项目,我想先实现下简单的增删改查,奈何没有很好的后台页面(毕竟不能测试代码直接在他的项目里改啊) 所以想到了淘淘商城中有这个后台的管理页面,打算一 ...
- 一步一步创建ASP.NET MVC5程序[Repository+Autofac+Automapper+SqlSugar](六)
前言 大家好,我是Rector 又是星期五,很兴奋,很高兴,很high...啦啦啦... Rector在图享网又和大家见面啦!!!上一篇<一步一步创建ASP.NET MVC5程序[Reposit ...
- MySQL事务隔离级别的实现原理
回顾 在MySQL的众多存储引擎中,只有InnoDB支持事务,所有这里说的事务隔离级别指的是InnoDB下的事务隔离级别. 读未提交:一个事务可以读取到另一个事务未提交的修改.这会带来脏读.幻读.不可 ...
- 版本控制——TortoiseSVN (1)安装与配置
=================================版权声明================================= 版权声明:原创文章 禁止转载 请通过右侧公告中的“联系邮 ...
- JAVA BASE64
Base64编码说明: Base64编码要求把3个8位字节(3*8=24)转化为4个6位的字节(4*6=24),之后在6位的前面补两个0,形成8位一个字节的形式. 如果剩下的字符不足3个字节, ...
- 图表工具--- ECharts.js学习(一) 简单入门
ECharts.js学习(一) 在项目开发的时候,在前端的数据需要用图表的形式展示.网上搜索了一下,发现有几种统计图库.具体有哪几种可以看: 前端开发者常用的9个JavaScript图表库 EChar ...
- Steeze框架之入门使用
一.介绍 steeze是一个优雅.简洁而又高效的PHP开源框架,在整合了知名框架ThinkPHP和Laravel优点的同时,重写了底层架构,增强了功能实现.支持swoole模型运行,支持容器.模型.依 ...
- JS 实现百度搜索功能
今天我们来用JS实现百度搜索功能,下面上代码: HTML部分: <!DOCTYPE html> <html> <head> <meta charset=&qu ...
- Python起步
最近研究系统自动化测试想起了一年前有学习Python的想法,借此机会准备抽时间好好学学.为方便以后学习和查询特写以下博客! Python基础 1. Python数据结构 (1)Python字符串 (2 ...
- 一张表搞清楚php is_null、empty、isset的区别
isset 判断变量是否已存在 empty 判断变量是否为空或为0 is_null 判断变量是否为NULL 变量 empty is_null isset $a="" true fa ...