如何快速的成为 Ant Design 的 contributor

你们好，我是 Rustin。今天想跟你们介绍下如何快速的成为 antd 的贡献者，但愿可以对想要加入 antd 社区贡献的同窗有帮助！

此博客在 GitHub 上公开发布. 若是您有任何问题或疑问，请在此处打开一个 issue。

简介

其实 antd 几乎不须要作任何的介绍，你们都知道它是中国甚至世界都煊赫一时的 UI 设计框架。他们的口号是：企业级产品设计体系，创造高效愉悦的工做体验。

我对这个框架感情颇深，从大二开始接触到这个框架至今已经陪我走过了 3 个年头，在校和实习期间用它愉悦的完成了数不清的做业和任务。去年在毕业设计期间，终于为它贡献了第一份力量。

最近我还在为它持续贡献力量，因此萌生了写一篇有关如何给 antd 贡献的文章的念头。言归正传，下面我会用我前两天帮 antd 修复一个 Bug 的例子来带你们熟悉一下在 antd 社区贡献的简单流程。

熟悉 PR 流程，阅读贡献指南

在我开始介绍个人例子以前，我以为若是你刚开始尝试在 Github 的社区开始贡献，建议你读一下 Github 官方的文档。

官方的文档介绍了一些很基础可是很重要的关于 PR 的规则，当你熟悉如何在 Github 建立一个 PR 以后，你还应该在 antd 的 README 中找到贡献指南，README 是每一个开源项目很重要的入口，
你基本上在 README 中能够找到全部与该库相关的连接。

对于 antd 来讲，他们把本身贡献指南挂在本身的官网当中，既有中文版也有英文版。你可按照本身的状况仔细阅读完贡献指南。
我以为目前咱们能够从贡献指南获取的要点信息是：

• 开发准则

  • 对于开发准则来讲，最主要的我以为就是要保持尊重和礼貌，不管是对贡献者仍是社区协做者，咱们都应该保持绝对的尊重和礼貌。
  • 一个要点就是在和社区交流的时候多用：please, could, thanks，这在哪一个社区都适用。

• 分支管理

  • 这个是一个很重要的点，由于每一个项目可能都有本身的开发和发布流程，在 antd 咱们要注意的是：修复 Bug 须要将 PR 发送到 master 分支，添加新功能则须要将 PR 发送到 feature 分支。

• 提交 Bug 报告

  • 其实在开源社区提交 Bug 报告也是开源很重要的一环，因此你们不要以为只有提 PR 才算贡献，其实只要是能促进代码库变得更好的事情在我看来都是贡献。
  • 须要注意的是，咱们在给 antd 提交 issue 报告时不能直接去仓库的 issue 位置开启一个报告，咱们须要在 antd 的 issue 小助手 上面提交问题，为何咱们须要这样作呢？由于大型的开源项目，可能都会收到上百成千的 issue，可是这些 issue 提的风格迥异，会对社区协做者形成很大的困扰，用户和社区互相折磨。
  • 关于如何建立一个好的 Bug 的报告，能够看看这两篇文章：How-To-Ask-Questions-The-Smart-Way 和 如何有效地报告 Bug。

基本上咱们获得这些要素信息以后，咱们就能够开始尝试去给社区作一些简单的贡献，下面我就经过一个例子给你们演示下一个 PR 的合并过程。

挑选问题，开始挑战

咱们的 PR 通常都是去修复 Bug 或者去添加一个新的功能，当咱们刚开始参与一个开源项目的时候，咱们能够从 Good First Issue 开始，大多数的开源项目都会给一些简单的问题加上 good first issue 的标签，
antd 就有这样被标记的问题，可是通常的活跃社区这样的问题都比较抢手，
可能问题刚发出来就被别人领取以后开始修复了，可是除了这些问题以外，在 antd 还有一类问题我以为难度适中，能够做为一些入门的问题来尝试。

在 antd 的 issue 中，有一类问题被 help wanted 的标签标记，这些问题大多都是一些用户提的需求或者简单的 Bug，咱们能够从这些问题入手，好比我上周六在 issue 列表中，发现了这个 help wanted 的问题。

我看到这个问题的时候，报告人已经作了一些研究，彷佛是 referer HTTP 头信息形成的。通常在开源社区中，若是你想修复这个问题，你就能够在下方留言本身已经在尝试修复这个问题或者 @ 社区协做者
询问看你能不能尝试修复这个问题。由于我没看到别人的留言，我就开始了一些尝试去修复这个问题。

尝试修复，提交 PR

首先，我没有在本身的网站或者公司的网站中使用过 codesandbox，因此集成 codesandbox 对我来讲是个陌生的事情。
可是可以发现问题报告人彷佛已经作出了研究，那我能不能顺着提问者的思路去解决这个问题呢？

关于 referer 你能够查阅它的一些标准，你会发现它还有个历史遗留问题。referer 其实是 "referrer" 误拼写。
看完以后我还看到了阮一峰老师的博客，可是实际上文章中有点小错误，我已经留言了，可能阮一峰老师还没来得及看。

关于 referer 的相关信息我就再也不赘述，能够查看上面的连接文章。当时我想能不能就简单暴力的设置 <meta name="referrer" content="no-referrer"> 来解决呢？它表示咱们对于任何请求都不带 referrer 信息。我在本地测试发现确实有效。

由于我以为也许这个功能对于 antd 来讲自己没有什么影响，因此我就提交了这份代码。
在 antd 中提交 PR，跟提交问题报告同样也须要遵循一份 PR 的提交模板，这份模板是放在 .github 目录下的,
它也有中文版，因此我就再也不描述里面的内容，由于我以为仍是比较清晰的。
个人 PR 是修复 Bug，因此根据咱们从贡献指南中获取到的信息来讲，咱们应该建立一个 PR 到 master 分支并填好 PR 的相关信息：

到这里，彷佛大功告成，坐等 PR 被合并了(我在 PR 的信息中使用了 Github 关联 PR 和 issue 的功能 "Fixes #22636"，查看用法)。

收到建议，从新修改

可是实际上没有那么顺利，通常咱们在提交 PR 以后，大几率会收到社区协做者的 code review，在 antd 中，会有🤖来帮你分配 reviewer。个人 PR 被 afc163 大神 review 了，收到了以下的评论：

在和 afc163 交流以后，咱们肯定须要只对 codesandbox 作特殊的处理，因此我就开始了一次新的尝试。

首先，从思路上来讲，目前想要作这种特殊的处理，咱们只能对使用特殊的标签来处理这种状况，具体支持单独设置 referer 的标签能够查阅这个文档。
同时我还去查阅了 codesandbox 的官方文档，我发现他们提供的定义接口其实不光支持 post 请求，同时还支持 get 请求:

那我马上有了思路，我能够直接使用 <a> 标签来发送 get 请求解决这个问题，我马上修改代码发送了 get 请求而且设置了 referer 规则：

<form>
    <Tooltip title={<FormattedMessage id="app.demo.codesandbox" />}>
       {/* FIXME: This temporarily solution to fix issues/22636, we need revert it to use form after the codesandbox api issue fixed. */}
            <a
              aria-label="Create New Sandbox with Prefilled Data" // {/* 这个属性详见 https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA*/}
              rel="noopener noreferrer" // {/* 设置不带 referrer 信息 */}
              target="_blank"
              href={`https://codesandbox.io/api/v1/sandboxes/define?parameters=${compress(
              JSON.stringify(codesanboxPrefillConfig),
              )}`} {/* 生成参数 */}
              className="code-box-codesandbox"
              onClick={() => this.track({ type: 'codesandbox', demo: meta.id })}
             />
    </Tooltip>
</form>

我提交这段代码，而后顺利的经过了 afc163 的 review，而后代码就能够顺利的合进了 master 分支了，咱们关联的问题 Github 也会自动的关闭。

可是这样确实就真的解决问题了吗？可是我到这一步仍是没能找到问题所在，为何会像问题里面说的忽然这几天就出问题呢？

排查问题，继续跟踪

我好奇的是为何这个东西会忽然出问题呢？而后我就去翻了 master 分支的提交记录，发现并无最近的跟它相关的提交修改记录，因此我就去了 codesandbox 官方文档又看了看，而后找到了一个他们官方的 demo。
我发现他们的 demo 也是须要重定向的，因此我以为这应该不是 antd 的修改形成的问题。而后我又在官网上发现了他们的 codesandbox-client 开源仓库。

找到三方依赖的仓库，咱们就能够提交一个 issue 去让他们帮忙查查看，另外也能够看看别人有没有这个问题，因此我建立了这个 issue 来继续跟踪这个问题。

终于在三天以后，我收到了该社区的回复，咱们发现其余人也有和 antd 相似的问题。该社区的协做者迅速的修复了这个问题。
他们解释说这是他们最近后端的一个跨域修改形成的，可是没有说明具体的细节，而后迅速的解决了这个问题。

回滚代码，解决问题

当 codesandbox 的问题修复以后，我也按照上面的流程再次发起了一个 PR 去回滚了个人代码，由于能够看到我在上面的代码中加入了一个 FIXME，个人那种修改只是一种暂时的解决方案，由于个人修改方案会与其余几个三方的连接模式不一致，
因此我在这个 PR 中回滚了代码。

到此为止，咱们就真正意义上的解决了这个问题，咱们也完整的走完了一个给 antd 贡献的流程。但愿个人这篇记录能对你尝试在 antd 社区贡献有帮助！

此外我还在 antd 开了个跟骨架屏相关的坑，欢迎你们来 antd 一块儿填坑！

---

参考连接

antd contributing guide

rust contributing guide

github docs

文章连接

文章首发于： Rustin 的博客

同步更新：

知乎

简书

掘金

segmentfault