公共css-“Feflow”——腾讯前端IVWeb团队开源的前端工程解决方案

2023-08-23 0 5,471 百度已收录

官方介绍

Feflow(发音为/fefl/)是腾讯开源的一款用于提高工程效率的后端工作流和规范工具。 最新版本是 v0.15.8,托管在 Github:feflow。 目前已广泛应用于NOW直播、花糖直播、花花交友、手机QQ附近、群视频、团礼物、汇音、应用宝、企鹅等业务。 WEB/IOS/Andriod稳定用户80+,累计制作项目已达240+。

Github 存储库

架构设计

Feflow的工作流程

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

除了服务基本的开发流程和规范外,Feflow还提供易于扩展的插件机制,为团队构建统一的工具链生态系统。

概念前提

Feflow 仅提供 CLI 和内核。 CLI负责与命令行终端交互,内核提供更新机制、插件机制和标准化的日志输出能力。 Feflow本身不包含任何业务相关的逻辑。

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

安装

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

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

npm i feflow-cli -g 
# or `yarn global add feflow-cli`

安装完成后,因为是第一次,所以立即执行初始化命令

feflow

这里要求您填写的npm注册表和npm代理是为了保证您使用Feflow安装模块或者从私有仓库下载npm包时网络畅通。 比如你想使用天猫镜像安装模块,不注意一路回车也没关系,也可以使用命令重新配置(请参考官方说明)详情)

脚手架安装

Feflow的核心部分没有脚手架,脚手架是通过Feflow安装的。 为了简单起见,您可以使用我们团队提供的脚手架生成器-ivweb 继续本教程。 可以使用以下命令安装它:

feflow install generator-ivweb

关于脚手架的详细内容请参考官方文档

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

# 构建器安装(可选)

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

feflow install builder-webpack4

创建项目

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

feflow init

如果这里选择脚手架,就选择刚刚安装的脚手架模板

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

|- 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 配置文件

项目创建完成后公共css,在项目目录下运行npm i安装依赖

然后运行 ​​feflow dev 启动本地服务。 该服务默认运行在:8001。

包构建

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

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

现在就可以将打包好的文件部署到服务器上了。至此,基础部分就已经完成了。

高级部分

高级部分请参考官方文档,里面有详细的说明。 在文档中,您可以了解如何自定义脚手架、自定义构建器和自定义插件。 有兴趣的朋友一定要折腾一下。 腾讯的套装还是不错的!

总结

Feflow作为工程化解决方案,非常适合项目的开发和迭代。 我们可以通过强大的自定义功能快速完成新项目的建立,通过插件解决方案实现复杂的项目需求。 总的来说公共css,这是一个非常值得实施的方案。 最终解决方案!

收藏 (0) 打赏

感谢您的支持,我会继续努力的!

打开微信/支付宝扫一扫,即可进行扫码打赏哦,分享从这里开始,精彩与您同在
点赞 (0)

悟空资源网 css 公共css-“Feflow”——腾讯前端IVWeb团队开源的前端工程解决方案 https://www.wkzy.net/game/147632.html

常见问题

相关文章

官方客服团队

为您解决烦忧 - 24小时在线 专业服务