logoAnt Design

⌘ K
  • 设计
  • 研发
  • 组件
  • 博客
  • 资源
  • 国内镜像
5.26.0
  • v6 的一些 CSS 琐事
  • 👀 视觉回归测试
  • 为什么禁用日期这么难?
  • 封装 Form.Item 实现数组转对象
  • 行省略计算
  • 📢 v4 维护周期截止
  • antd 里常用的 TypeScript 工具方法
  • 一个构建的幽灵
  • 当 Ant Design 遇上 CSS 变量
  • API 的历史债务
  • 灵动的 Notification
  • 色彩模型与颜色选择器
  • 主题拓展
  • 虚拟表格来了!
  • 快乐工作主题(一)
  • 动态样式去哪儿了?
  • Suspense 引发的样式丢失问题
  • 打包体积优化
  • 你好,GitHub Actions
  • 所见即所得
  • 静态方法之痛
  • SSR 静态样式导出
  • 依赖排查
  • 贡献者开发维护指南
  • 转载-如何提交无法解答的问题
  • 新的 Tooltip 对齐方式
  • 非必要的渲染
  • 如何成长为 Collaborator
  • Modal hook 的有趣 BUG
  • antd 测试库迁移的那些事儿
  • Tree 的勾选传导
  • getContainer 的一些变化
  • 组件级别的 CSS-in-JS
一. 阅读相关文章熟悉相关概念
二. 拉取 Ant Design 代码到本地
1. Fork 项目
2. 添加远端分支地址
3. 在 github 上创建新 fix 分支
4. 在本地拉取新分支
三. 在Ant Design 的 issue页找到 issue 并分析选择
四. 开发流程
五. 运行测试用例及规范检查
六. 合并修改
七. 提交 Pull Request
八. 接受维护者的 review 并修改,合格后等待维护者 merge
九. 常见错误
十. 成为 Collaborator
不要怕犯错误,勇敢地去做,开源世界欢迎大家。
相关资源

如何成长为 Collaborator

2022-12-22
@heiyu4585

文章被以下专栏收录:

antd

Ant Design

一个 UI 设计体系
我有想法,去参与讨论
antd

Ant Design

Ant Design 官方专栏
我有想法,去参与讨论
文档贡献者
  • 非必要的渲染Modal hook 的有趣 BUG

    相关资源

    Ant Design X
    Ant Design Charts
    Ant Design Pro
    Pro Components
    Ant Design Mobile
    Ant Design Mini
    Ant Design Web3
    Ant Design Landing-首页模板集
    Scaffolds-脚手架市场
    Umi-React 应用开发框架
    dumi-组件/文档研发工具
    qiankun-微前端框架
    Ant Motion-设计动效
    国内镜像站点 🇨🇳

    社区

    Awesome Ant Design
    Medium
    Twitter
    yuque logoAnt Design 语雀专栏
    Ant Design 知乎专栏
    体验科技专栏
    seeconf logoSEE Conf-蚂蚁体验科技大会
    加入我们

    帮助

    GitHub
    更新日志
    常见问题
    报告 Bug
    议题
    讨论区
    StackOverflow
    SegmentFault

    Ant XTech logo更多产品

    yuque logo语雀-构建你的数字花园
    AntV logoAntV-数据可视化解决方案
    Egg logoEgg-企业级 Node.js 框架
    Kitchen logoKitchen-Sketch 工具集
    Galacean logoGalacean-互动图形解决方案
    xtech logo蚂蚁体验科技
    主题编辑器
    Made with ❤ by
    蚂蚁集团和 Ant Design 开源社区

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

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

    贡献指南

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

    成为社区协作成员

    开发者说明

    使用 git 创建 PR 的一些建议

    二. 拉取 Ant Design 代码到本地

    1. Fork 项目

    • 首先需要 fork 项目,进入项目页面,点击右上角的 Fork 按钮
    • 你的 github 帐号中会出现 Ant Design 链接是 https://github.com/heiyu4585/ant-design 这个项目
    • 在本地电脑上项目地址使用以下命令:得到一个 github 文件夹
    bash
    git clone https://github.com/[yourGithubAccount]/ant-design.git

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

    2. 添加远端分支地址

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

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

    3. 在 github 上创建新 fix 分支

    image-20221211130607684

    4. 在本地拉取新分支

    bash
    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 分支:

    bash
    git checkout master
    • 使用以下代码拉出远程的最新代码:
    bash
    git pull upstream master
    • 切换回 fix-branch
    bash
    git checkout fix-branch
    • 把 master 的 commit 合并到 fix-branch,有冲突解决冲突:
    bash
    git rebase master
    • 把更新代码提交到自己的 fix-branch 中:
    bash
    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

    相关资源

    了解更多 Ant Design 的开发流程和和注意事项,可以参考:

    • 贡献者开发维护指南