重构

[chiyan-lin]

开发流程+组件库 重构

0. 出发点

目前活动页或前端项目开发中，缺乏统一的开发标准和为业务定制的统一开发框架，不利于沉淀和积累产出。

所以希望从制定组内统一的基础开发框架与标准来做到：

1. 积累与复用的途径
2. 统一的开发环境与编码标准

通过自下而上的流程，从底层框架开始优化开发流程，和达到沉淀组件库的目的，从而提高开发效率与降低交接成本。

* 开发框架指业务开发框架，意图是根据hago业务整合的库集合

1. 集成 fec/vuex/ts/lint 的整体框架

目前的问题

• 基于模版的项目不利于长期迭代和统一升级
• 只是约定最基础通用的文件与目录结构，没有实际性的约束
• 缺乏有效的积累和复用途径
• 只是活动页有基础项目模版，缺少标准的后台项目、其他类型项目起始模板

《蚂蚁前端研发最佳实践》

《蚂蚁金服的前端框架和工程化实践》

思路/功能

• 集成所有功能的单一框架库
  • 统一开发环境
  • 统一升级
• 约定式的目录结构
  • 符合结构的目录不用配置即可使用
    • components/plugins ... 自动注册
    • vuex module 自动注册
  • 以目录为单元沉淀与积累
  • 硬性控制目录结构
    • 区分 views/data/service 分层结构
• 所有前端项目基于同一个框架库
  • 基于插件形式支持不同场景变体
    • 活动页自动引入hago-app-call、hago-act-sdk等
    • 游戏类活动页自动引入 渲染库、缓动库 等
    • 后台项目自动引入各种 ui框架 等
• 同一个命令行/可编程的接口
  • 所有功能都出于同一个接口
    • dev/build
    • multi-lang
    • verify
    • 插件的上传/下载
  • 提供可编程接口
• 代码检查

希望达到的目标

• 提供统一开发标准
  • 硬性统一目录结构，统一的代码分层结构
• 提供有效的产出沉淀手段
  • 复用不限于组件，也包含逻辑、工具函数等
• 降低新项目上手难度/交接难度

衡量指标

• 沉淀数量/复用数量
• 提高开发效率

2. 整合框架

• 基于 fec 的编译
• 整合 ts/lint/prettier
• 约定式目录
  • 如果有 routes 目录自动引入 vue-router
  • 如果有 module 目录自动引入 vuex
  • etc

3. 界面代码分层结构

• 两层分层结构
  • 视图层、领域层

视图层

UI与交互的部分，自身基本为PureComponent，不含有自身数据

所有交互产生的逻辑与数据处理都交由领域层处理

领域层

纯逻辑处理部分，本身负责处理数据获取与发送的职责

好处

视图层都是PureComponent的设计，能提高组件部分复用的可能

领域层基于OOP设计，可以用抽象类表示一组同样行为的逻辑，例如榜单、抽奖等。这样复用时只需要根据业务派生实现对应的抽象方法即可

[chiyan-lin]

参考其他人的做法，整理了一下组件库大概需要的功能

参考

• vant-cli
• vue-cli-template-library
• jslib-base
• father

必要功能

• 支持ES6+或TypeScript编写源码
• 支持 cjs、esm 和 umd 等不同格式的打包
• 支持各类校验(ESlint、Stylelint、prettier、pre-commit 。。。)
• 集成单元测试和端到端测试环境+测试覆盖率(jest + vue-test-utils 或 karma + mocha + chai)
• 自动生成文档站点和组件示例(storybook 或 vue-markdown-loader)
• 自动化版本管理(SemanticRelease, 自动化Git tag、npm version、 releases changelog)
• 内置各类模板(组件源码模板、测试代码模板、文档模板、ISSUE模板)
• 接入CI（test->build->releases）
• 统一的命令行指令

可选功能

项目结构

multi repo

├── src 组件源代码目录
  ├── index.js
├── package.json
├── test 测试用例
├── types 类型申明
├── fec.config.js 构建
├── CHANGELOG.md 变更日志
├── README.md 组件文档
└── TODO.md 计划功能

开发流程

1. fec init hago-library-seed vue-component/js/directive (脚手架初始化，仓库创建)
2. yarn dev 在开发过程中对文档和示例进行预览

• 编写用例和文档
• 开发
• yarn test 查看覆盖率和通过率
• push merge

3. CI

• test
  lint

test 通过率覆盖率

• build

构建组件库，在es和lib目录生成可用于生产环境的组件代码

构建文档站点，在site目录生成可用于生产环境的文档站点代码（GitLab Pages）

• release

生成changelog

自动更新版本号，publish 到 npm

站点文档使用门户抓取