「Feflow」——Tencent前端IVWeb团队开源前端工程化解决方案

官方介绍

Feflow (读音 /ˈfefləʊ/)是腾讯开源的用于提升工程效率的前端工作流和规范工具。最新版本是v0.15.8,托管在Github上:feflow。目前已经在NOW直播、花样直播、花样交友、手Q附近、群视频、群送礼、回音、应用宝、企鹅号等业务广泛使用。有80+ WEB/IOS/Andriod 稳定用户,累计投入生产项目达到240+。


「Feflow」——Tencent前端IVWeb团队开源前端工程化解决方案


Github仓库

https://github.com/Tencent/feflow

架构设计

「Feflow」——Tencent前端IVWeb团队开源前端工程化解决方案

Feflow的工作流程

Feflow 借鉴了 Pipline 的思想,将日常的研发工作划分为:初始化、本地开发、打包构建、检查、发布上线五个步骤。分别对应 init、dev、build、test和deploy五个基本命令。


「Feflow」——Tencent前端IVWeb团队开源前端工程化解决方案


除了服务好基本的开发工作流和规范,Feflow 提供了易于扩展的插件机制,用于打造团队统一的工具链生态。

「Feflow」——Tencent前端IVWeb团队开源前端工程化解决方案

概念前提

Feflow 只提供了一个CLI和内核,CLI 负责和命令行终端进行交互,内核则提供了更新机制、插件机制和标准化的日志输出能力,Feflow 自身并不会内置任何业务强相关的逻辑。

因此,如果你想在团队中使用 Feflow,你需要了解以下概念:

  • 脚手架
  • 构建器
  • 插件
  • 开发规范

安装

下面我们就一起来安装体验一下:

首先前提是你已经安装了npm,通常安装node环境即可,然后使用以下命令

npm i feflow-cli -g 
# or `yarn global add feflow-cli`
「Feflow」——Tencent前端IVWeb团队开源前端工程化解决方案

安装完成后,因为是第一次,随即进行初始化命令

feflow

这里让你填写的 npm registry 和 npm proxy 是为了让你用 Feflow 安装模块的时候保证网络畅通或者是从私有仓库上下载 NPM 包。比如说你想用淘宝镜像安装模块,如果不小心一路回车也没关系,还可以使用命令再配置(详情可参考官方说明)

脚手架安装

Feflow 的核心部分并没有一个脚手架,脚手架都是通过 Feflow 来安装的。为了简单起见,你可以先使用我们团队提供的脚手架 generator-ivweb 来继续这个教程。可以用如下命令安装:

feflow install generator-ivweb

关于脚手架详细内容可以看官方文档

「Feflow」——Tencent前端IVWeb团队开源前端工程化解决方案

到这里,脚手架就安装成功了,下面就可以开始创建项目了。

# 构建器安装(可选)

generator-ivweb 生成的项目默认使用了 builder-webpack4 作为构建器,你可以先安装它,当然,如果你不安装,运行 feflow dev 时 Feflow 会自动帮你安装上。安装命令如下:

feflow install builder-webpack4

创建项目

创建项目很简单,使用以下命令即可

feflow init

这里选择脚手架就选择刚才安装的脚手架模板

「Feflow」——Tencent前端IVWeb团队开源前端工程化解决方案

以下就是生成的项目结构,本项目是基于React+Redux的

「Feflow」——Tencent前端IVWeb团队开源前端工程化解决方案

|- src
|- assets # 公共的 JS、CSS、Images 目录
|- middleware # 公共的 Redux 中间件 目录
|- modules # 公共模块
|- pages # 页面目录
|- index # 首页
|- actions # 页面级的 actions 目录
|- components # 页面级的公共组件目录
|- reducers # 页面级的 reducers 目录
|- index.html # HTML 入口
|- index.js # 页面 Class
|- index.less # pageComponent.js 中元素的样式,或者全局样式
|- init.js # JS 入口
|- pageComponent.js # React 根组件
|- reducers # 公共的 reducers 目录
|- feflow.json # Feflow 配置文件

项目创建好后,在项目目录下运行 npm i 安装好依赖

「Feflow」——Tencent前端IVWeb团队开源前端工程化解决方案

然后再运行 feflow dev 就能启动本地服务,服务默认运行在 http://127.0.0.1:8001。

「Feflow」——Tencent前端IVWeb团队开源前端工程化解决方案

打包构建

项目开发满意后,你可能想部署到正式环境中,那么首先就得把项目代码构建成浏览器能运行的版本。运行 felfow build 就会在项目根目录下生成一个打包后的目录,不同脚手架、不同构建器生成的目录以及目录里面的内容都各不相同。以此项目为例,运行 feflow build 就会生成一个 dist 目录,里面的目录结构如下:

|- cdn
|- <bizName> # 目录名根据 feflow.json 中的业务名称属性 bizName 决定,里面包含 JS、CSS 和图片等静态资源
|- img # 图片资源
|- offline
|- offline.zip # 离线包
|- webserver
|- <bizName> # 目录名根据 feflow.json 中的业务名称属性 bizName 决定,里面包含了页面入口
|- index.html # 首页页面入口

你现在可以把打包后的文件部署在服务器上。至此基本部分就已经全部完成

高级部分

高级部分可参考官方文档,有详细的说明,在文档中你可以了解到如何自定义脚手架、自定义构建器、自定义插件,感兴趣的小伙伴们一定要折腾一下,腾讯这一套还是不错的!

总结

Feflow这一台工程化方案非常适合项目的开发以及迭代,通过强大的自定义功能我们可以快速完成新项目的构建,通过插件化方案实现复杂的项目需求,总体来说是非常值得使用的一个前端解决方案!

人已赞赏
技术博文

开源跨平台Http代理服务器,远程调试的瑞士军刀——「ZanProxy」

2020-9-9 21:10:18

更多编程知识

网络安全渗透技术(入门视频课程)

2020-9-18 8:27:09

个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索