ant-design/docs/blog/to-be-collaborator.zh-CN.md
黑雨 0c6e87228d
site: add my article (#39607)
* blog: add my article

* site: update article

* site: update article

* feat: update article

* docs: adjust words

* docs: add invite part

Co-authored-by: 二货机器人 <smith3816@gmail.com>
2022-12-22 16:50:34 +08:00

6.3 KiB
Raw Blame History

title date author
如何成长为 Collaborator 2022-12-08 heiyu4585

大家好,我是黑雨。关于 Ant Design相信大家都非常熟悉我在很多后台管理系统项目使用过 Ant Design给我最大的感觉就是好用、好看、简单、稳定。现在 v5 版本已经发布,强烈推荐大家试使用,我也有幸开发了 v5 版本的 Tour 组件和 App 组件,以及一些其他维护工作。下面给大家分享一下 Ant Design 的 PR 流程,希望能给有兴趣为社区共建的同学提供一份参考。

一. 阅读相关文章熟悉相关概念

贡献指南

如何优雅地在 github 上贡献代码

成为社区协作成员

开发者说明

使用 git 创建 PR 的一些建议

二. 拉取 Ant Design 代码到本地

1. Fork 项目

git clone https://github.com/[yourGithubAccount]/ant-design.git

注意: [yourGithubAccount] 改为自己的 github 用户名

2. 添加远端分支地址

  • 进入 Ant Design 文件夹,添加 Ant Design 的远程地址
cd ant-design
git remote add upstream https://github.com/ant-design/ant-design
  • 拉取最新的远端分支版本
git pull upstream master

现在我们在 fork 来的 master 分支上,这个 master 留作跟踪 upstream 的远程代码

3. 在 github 上创建新 fix 分支

image-20221211130607684

4. 在本地拉取新分支

git pull
git checkout fix-branch

现在我们可以在分支上更改代码了

三. 在Ant Design 的 issue页找到 issue 并分析选择

为了能帮助你开始你的第一次尝试,我们用 good first issues 标记了一些比较容易修复的 bug 和小功能,这些 issue 可以很好地作为你的首次尝试。help wanted 是作为开发者比较容易接手的一些问题。

image-20221216111126983

四. 开发流程

  1. npm start 在本地运行 Ant Design 的网站
  2. 按照 issue 描述调试、修复问题或者开发新的 feature

五. 运行测试用例及规范检查

  1. 在添加 issue 相关测试用例同时,确认所有的测试都是通过的 npm run test。 小贴士:开发过程中可以用 npm test -- --watch TestName 来运行指定的测试。
  2. 运行 npm test -- -u 来更新 jest snapshot 并且把这些更新也提交上来(如果有的话)。
  3. 确保你的代码通过了 lint 检查 npm run lint

六. 合并修改

  • 一个常见的问题是远程的 upstream (ant-design/master) 有了新的更新,从而会导致我们提交的 Pull Request 时会导致冲突,因此我们可以在提交前先把远程其他开发者的 commit 和我们的 commit 合并。

  • 使用以下代码切换到 master 分支:

git checkout master
  • 使用以下代码拉出远程的最新代码:
git pull upstream master
  • 切换回 fix-branch
git checkout fix-branch
  • mastercommit 合并到 fix-branch,有冲突解决冲突:
git rebase master
  • 把更新代码提交到自己的 fix-branch 中:
git push origin fix-branch

七. 提交 Pull Request

你可以在你的 github 代码仓库页面切换到 branches 页面点击 fix-branch 分支后点击 New pull request 按钮,添加相关注释后提交. 或者切换到 fix-branch 分支的代码仓库点击 Compare & pull request 按钮,添加相关注释后提交.

  • PR 页面 上按照默认格式认真填写提交描述,可以参考已经 merge 的 PR。

  • 查看 checks 是否全部通过,如果没有点 details 就去查看对应的报错,修复后重新 push。

image-20221210233540659

八. 接受维护者的 review 并修改,合格后等待维护者 merge

image-20221216104628528

九. 常见错误

  • PR 描述未按要求填写

image-20221210234139748

  • 未 rebase 到最新版本

image-20221210234002553

  • react 16 test 未通过

image-20221212091630186

修复方法:

npm run install-react-16
npm run test componet/XXX

十. 成为 Collaborator

当持续维护一段时候后Collaborator 会启动邀请机制,在 #3222 中发起投票。当满足足够票数后,会正式邀请你成为 Collaborator。

Collaborators

不要怕犯错误,勇敢地去做,开源世界欢迎大家。

giphy