如何快速的成爲 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