- 数据可视化
- 前端
【免费下载链接】F2
📱📈An elegant, interactive and flexible charting library for mobile.
F2 是 AntV 团队开源的移动端可视化图表库(仓库根目录 README.md 定位为 "An elegant, interactive and flexible charting library for mobile")。本文以仓库内 CONTRIBUTING.zh-CN.md 为核心骨架,结合根目录package.json、lerna.json、.github/workflows/下真实 CI 工作流,系统讲解向 F2 提交 issue、走通 Pull Request 流程、遵守 Angular Commit 规范,以及 F2 团队如何基于 semver 进行版本发布管理。读完本文,你将能独立完成一次符合 F2 社区规范的代码贡献,并理解其 CI 校验与自动化发布链路。
一、开篇:F2 的贡献总览
F2 仓库采用 monorepo 结构(见 pnpm-workspace.yaml 与 lerna.json),核心包为 packages/f2(@antv/f2,当前版本 5.14.0,见 packages/f2/package.json),并包含f2-algorithm、f2-react、f2-vue、f2-wx、f2-node、f2-wordcloud等周边包。社区的贡献通道有两条:
- 提交 issue:报告缺陷、提出新需求或疑问;
- 提交 Pull Request(PR):直接修改代码、修复问题或新增功能,经 AntV 团队 review 后合入主干。
从仓库实际配置看,F2 的贡献链路是"规范驱动 + CI 强制校验 + 自动化发布":package.json的pre-commit钩子会在提交前自动运行lint与test;CI 工作流 .github/workflows/ci.yml 在每次 push 和 PR 时执行 lint、build、test 三件套;发布则由 .github/workflows/auto-release.yml 在master分支上自动触发。
二、提交 Issue:让问题被高效处理
官方文档 CONTRIBUTING.zh-CN.md 对提交 issue 提出了三条核心要求:
- 明确 issue 类型:是 bug 报告、功能请求,还是使用疑问,先说清楚;
- 避免重复:提交前先搜索现有 issue,确认不是重复问题;
- 表达明确意图:在标签(参考文档中的"标签分类")、标题或内容中体现清晰意图。
提交后,AntV 负责人会确认 issue 意图、更新更准确的标签、关联到对应 milestone,并指派开发者跟进。
仓库侧还提供了配套的自动化处理:工作流 .github/workflows/issue-automated.yml 在 issue 被opened、reopened、edited时触发,通过调用仓库内脚本.github/workflows/scripts/issue-automated.js对 issue 做初步分类与响应。这意味着一条规范、意图明确的 issue 会被更快地送入处理流水线。
三、提交代码:完整的 Pull Request 流程
文档给出了标准 PR 提交流程(CONTRIBUTING.zh-CN.md),共四步:
3.1 创建有语义的分支
# 先创建开发分支开发,分支名应该有含义,避免使用 update、tmp 之类的 $ git checkout -b branch-name英文版文档 CONTRIBUTING.md 补充了建议:实现新功能时推荐使用feature/xxx风格的分支名。
3.2 安装依赖并初始化 monorepo
$ npm i $ npm run bootstrapnpm run bootstrap对应根目录 package.json 中的lerna bootstrap——这是 F2 monorepo 的关键初始化步骤:lerna 会根据 lerna.json 中的packages: ["packages/*"]配置,为所有子包安装并链接本地依赖,确保各包之间直接引用源码而非已发布版本。另外,仓库同时提供pnpm-workspace.yaml声明工作区,两种包管理方式并行存在。
3.3 运行测试并补充用例
$ npm testnpm test即jest(见 package.json)。F2 的测试体系有两个显著特点(见 jest.config.js):
- 跑在浏览器环境中:runner 与 testEnvironment 均为
jest-electron,测试在 Electron 渲染进程里执行,贴近真实渲染场景; - 强依赖图像快照:各组件测试目录下都有
__image_snapshots__/,例如 packages/f2/test/components/area/image_snapshots、packages/f2/test/components/line/image_snapshots,用于对比渲染结果。因此修改渲染相关代码时,必要时需要新增或修改测试用例,并且npm run snapshot(jest --updateSnapshot,见 package.json)可用于更新快照基线。
另外,pre-commit钩子(package.json)会在git commit前自动执行lint和test,未通过则阻止提交——这是第一道自动关卡。
3.4 提交并推送
$ git add . # git add -u 删除文件 $ git commit -m "fix(role): role.use must xxx" $ git push origin branch-name提交后即可在仓库 Pull Request 页面创建 PR。
3.5 PR 必须附带的四项信息
为了保证后期回溯历史,文档要求每个 PR 提供以下信息(CONTRIBUTING.zh-CN.md):
- 需求点:本次改动要实现什么功能(一般关联 issue 或注释即可);
- 升级原因:不同于 issue,简要说明为什么要处理这个问题;
- 框架测试点:关联到相关测试文件,描述关键点即可;
- 关注点:针对用户而言的注意事项,可缺省;一般指不兼容更新等,需要额外提示用户。
3.6 PR 的 CI 与 Danger 校验
PR 创建后会触发完整校验链:
- CI 工作流.github/workflows/ci.yml:在
macos-14、Node 20 环境上依次执行npm run lint、npm run build、npm run test,测试失败时会上传渲染差异快照产物(__diff_output__/*.png)便于排查; - 包体积监控:根目录 dangerfile.js 基于 danger-js 与 GitHub Actions artifacts 对比 PR 前后各包
dist/*.js的体积变化,其中f2/dist/index.js与f2/dist/index.min.js为关键产物(CRITICAL_ARTIFACT_PATHS),任何体积变化都会被报告;体积变化超过 2%(CRITICAL_THRESHOLD = 0.02)标记为 Critical,超过 0.2%(SIGNIFICANCE_THRESHOLD = 0.002)标记为 Significant。这与根目录 package.json 中limit-size对packages/f2/dist/index.min.js不超过 180 Kb(gzip)的限制共同构成 F2 的"体积红线"。
四、代码风格:必须通过 ESLint
F2 要求所有贡献代码通过 ESLint 检查,本地验证命令为:
$ npm run lint对应脚本为eslint ./(package.json)。仓库还提供lint-fix(eslint --fix ./)用于自动修复,以及prettier脚本(prettier --write './packages/**/*.{ts,tsx}',package.json)统一格式化。ESLint 相关依赖(eslint、@typescript-eslint/*)均声明在 package.json 的 devDependencies 中。
五、Commit 提交规范:Angular Commit Message Format
文档明确要求采用 angular 规范(CONTRIBUTING.zh-CN.md),这样 history 更加清晰,且可以自动生成 changelog——F2 的 packages/f2/CHANGELOG.md 就是由 Conventional Commits 自动生成的实证。
5.1 提交消息结构
<type>(<scope>): <subject> <BLANK LINE> <body> <BLANK LINE> <footer>5.2 type 的九种取值
| type | 含义 |
|---|---|
feat | 新功能 |
fix | 修复问题 |
docs | 修改文档 |
style | 修改代码格式,不影响代码逻辑 |
refactor | 重构代码,理论上不影响现有功能 |
perf | 提升性能 |
test | 增加修改测试用例 |
chore | 修改工具相关(包括但不限于文档、代码生成等) |
deps | 升级依赖 |
5.3 其余组成部分
- scope:修改文件的范围,例如
fix(role)中的role; - subject:用一句话清楚描述本次提交做了什么;
- body:补充 subject,适当增加原因、目的等,可不写;
- footer:当有非兼容修改(Breaking Change)时必须在此处描述清楚;同时可关联 issue,如
Closes #1, Closes #2, #3。
5.4 完整示例
fix($compile): [BREAKING_CHANGE] couple of unit tests for IE9 Older IEs serialize html uppercased, but IE9 does not... Would be better to expect case insensitive, unfortunately jasmine does not allow to user regexps for throw expectations. Document change on antvis/f2#12 Closes #392 BREAKING CHANGE: Breaks foo.bar api, foo.baz should be used instead5.5 规范的实际收益
- 可读的 history:
feat、fix等 type 前缀让git log一目了然; - 自动 changelog:根目录 package.json 提供
npm run changelog(generate-changelog)脚本;lerna 发布配置中conventionalCommits: true(lerna.json)会依据 commit 类型自动推导版本号,这正是 packages/f2/CHANGELOG.md 中按 "Bug Fixes / Features" 分类生成的机制来源。
六、发布管理:基于 semver 的语义化版本
6.1 版本策略总览
F2 基于 semver 语义化版本号进行发布(CONTRIBUTING.zh-CN.md):
master分支为当前稳定发布的版本;- 开发分支直接从
master切出; - 所有 API 的废弃都需要在当前稳定版本上给出
deprecate提示,并保证在当前稳定版本上一直兼容到新版本发布。
仓库实际版本演进与此完全吻合:@antv/f2当前版本 5.14.0(packages/f2/package.json),lerna 全局版本同为 5.14.0(lerna.json)。
6.2 发布策略:每个大版本一位发布经理(PM)
每个大版本都有一位发布经理(PM),分三个阶段履职:
准备工作:
- 建立 milestone,确认需求关联 milestone,指派和更新 issues。
发布前:
- 确认当前 Milestone 的所有 issue 都已关闭或可延期,并完成性能测试;
- 发起一个新的 Release Proposal MR,参照 node CHANGELOG 编写
History,修正文档中与版本相关的内容——commits 可以自动生成,命令为:
$ npm run commits- 指定下一个大版本的 PM。
发布时:
- 将老的稳定版本(master)备份到以当前大版本命名的分支(如
1.x),并设置 tag 为{v}.x(v 为当前版本,例如1.x); - 发布新的稳定版本到 npm,并通知上层框架进行更新;
npm publish之前,先阅读『我是如何发布一个 npm 包的』一文。
6.3 仓库实际的自动化发布链路
虽然文档描述的是人工 PM 流程,但当前仓库已在 .github/workflows/auto-release.yml 中将其自动化,触发条件与流程为:
- 触发:仅当推送到
master分支且 commit message 以chore(release):开头时触发; - 质量闸门:依次执行
yarn(安装依赖)、npm run lint、npm run build、npm run test; - 版本提升:
npm run version(即lerna version --yes,package.json),利用 lerna 的conventionalCommits依据提交类型自动提升版本; - 发布:
npm run release(即lerna publish from-git --yes --summary-file,package.json),从 git tag 出发发布到 npm,发布配置中createRelease: "github"(lerna.json)会自动在 GitHub 创建 Release; - 通知:通过钉钉机器人发送发布开始、成功、失败三种状态通知,成功时以
packages/f2/package.json中的版本号作为标题(🎉 F2 新版本 X 发布啦 🎉)。
这套流水线也印证了文档中"发布到 npm 并通知上层框架更新"的意图——F2 周边的f2-react、f2-vue、f2-wx等包正是通过 lerna 统一发布的。
七、总结:一条完整的贡献路径
将文档规范与仓库工程配置对照,一次合格的 F2 贡献完整路径是:
- 先在 issue 列表 中搜索,避免重复;描述问题时明确类型与意图;
- 从
master切出语义化分支(新功能建议feature/xxx); npm i && npm run bootstrap初始化 monorepo;- 编写/修改代码与测试,本地跑
npm run lint与npm test全部通过(pre-commit 钩子也会强制校验); - 按 Angular 规范提交 commit(含 Breaking Change 时必须在 footer 说明),推送分支并创建 PR;
- 在 PR 中补齐需求点、升级原因、框架测试点、关注点四项信息,等待 CI(lint/build/test)、Danger 体积监控与 AntV 团队 review;
- 合入
master后,若为发布提交(chore(release):),自动化工作流将完成版本提升、npm 发布与钉钉通知。
对贡献者而言,本文的全部命令与规范均可直接照抄使用;对想深入理解 F2 工程化体系的人,建议进一步阅读 dangerfile.js、jest.config.js、.github/workflows/auto-release.yml 以及 packages/f2/CHANGELOG.md,体会一套成熟开源项目的质量与发布治理实践。
- 数据可视化
- 前端
【免费下载链接】F2
📱📈An elegant, interactive and flexible charting library for mobile.
相关推荐
Nebular 贡献指南:从 Issue 提交、Pull Request 流程到 Commit Message 规范
Nebular 贡献指南:从 Issue 提交、Pull Request 流程到 Commit Message 规范 本文是一份面向 Nebular 开源仓库贡
前端UI组件WePY 开源贡献指南:从 Issue 提交、Fork PR 工作流到 Commit 规范与本地调试
WePY 开源贡献指南:从 Issue 提交、Fork PR 工作流到 Commit 规范与本地调试 导读 本文是 WePY(小程序组件化开发框架)仓库的完整贡
前端小程序开发工具FinRL 贡献指南:基于 Issue、PR 与 pre-commit 的协作开发规范
FinRL 贡献指南:基于 Issue、PR 与 pre commit 的协作开发规范 导读 本文依据 FinRL 仓库官方《Contributing Guid
金融科技强化学习人工智能
创作声明:本文部分内容由AI辅助生成(AIGC),仅供参考