大家好，我是 Rustin。今天想跟大家介紹下如何快速的成為 antd 的貢獻(xiàn)者，希望能夠?qū)ο胍尤?antd 社區(qū)貢獻(xiàn)的同學(xué)有幫助！
此博客在 GitHub 上公開(kāi)發(fā)布. 如果您有任何問(wèn)題或疑問(wèn)，請(qǐng)?jiān)诖颂幋蜷_(kāi)一個(gè) issue。
簡(jiǎn)介
其實(shí) antd 幾乎不需要做任何的介紹，大家都知道它是中國(guó)甚至世界都炙手可熱的 UI 設(shè)計(jì)框架。他們的口號(hào)是：企業(yè)級(jí)產(chǎn)品設(shè)計(jì)體系，創(chuàng)造高效愉悅的工作體驗(yàn)。
我對(duì)這個(gè)框架感情頗深，從大二開(kāi)始接觸到這個(gè)框架至今已經(jīng)陪我走過(guò)了 3 個(gè)年頭，在校和實(shí)習(xí)期間用它愉悅的完成了數(shù)不清的作業(yè)和任務(wù)。去年在畢業(yè)設(shè)計(jì)期間，終于為它貢獻(xiàn)了第一份力量。
最近我還在為它持續(xù)貢獻(xiàn)力量，所以萌生了寫(xiě)一篇有關(guān)如何給 antd 貢獻(xiàn)的文章的念頭。言歸正傳，下面我會(huì)用我前兩天幫 antd 修復(fù)一個(gè) Bug 的例子來(lái)帶大家熟悉一下在 antd 社區(qū)貢獻(xiàn)的簡(jiǎn)單流程。
熟悉 PR 流程，閱讀貢獻(xiàn)指南
在我開(kāi)始介紹我的例子之前，我覺(jué)得如果你剛開(kāi)始嘗試在 Github 的社區(qū)開(kāi)始貢獻(xiàn)，建議你讀一下 Github 官方的文檔。
官方的文檔介紹了一些很基礎(chǔ)但是很重要的關(guān)于 PR 的規(guī)則，當(dāng)你熟悉如何在 Github 創(chuàng)建一個(gè) PR 之后，你還應(yīng)該在 antd 的 README 中找到貢獻(xiàn)指南，README 是每個(gè)開(kāi)源項(xiàng)目很重要的入口，
你基本上在 README 中可以找到所有與該庫(kù)相關(guān)的鏈接。
對(duì)于 antd 來(lái)說(shuō)，他們把自己貢獻(xiàn)指南掛在自己的官網(wǎng)當(dāng)中，既有中文版也有英文版。你可按照自己的情況仔細(xì)閱讀完貢獻(xiàn)指南。
我覺(jué)得目前我們可以從貢獻(xiàn)指南獲取的要點(diǎn)信息是：
-
- 對(duì)于開(kāi)發(fā)準(zhǔn)則來(lái)說(shuō)，最主要的我覺(jué)得就是要保持尊重和禮貌，無(wú)論是對(duì)貢獻(xiàn)者還是社區(qū)協(xié)作者，我們都應(yīng)該保持絕對(duì)的尊重和禮貌。
- 一個(gè)要點(diǎn)就是在和社區(qū)交流的時(shí)候多用：please, could, thanks，這在哪個(gè)社區(qū)都適用。
-
分支管理
- 這個(gè)是一個(gè)很重要的點(diǎn)，因?yàn)槊總€(gè)項(xiàng)目可能都有自己的開(kāi)發(fā)和發(fā)布流程，在 antd 我們要注意的是：修復(fù) Bug 需要將 PR 發(fā)送到 master 分支，添加新功能則需要將 PR 發(fā)送到 feature 分支。
-
提交 Bug 報(bào)告
- 其實(shí)在開(kāi)源社區(qū)提交 Bug 報(bào)告也是開(kāi)源很重要的一環(huán)，所以大家不要覺(jué)得只有提 PR 才算貢獻(xiàn)，其實(shí)只要是能促進(jìn)代碼庫(kù)變得更好的事情在我看來(lái)都是貢獻(xiàn)。
- 需要注意的是，我們?cè)诮o antd 提交 issue 報(bào)告時(shí)不能直接去倉(cāng)庫(kù)的 issue 位置開(kāi)啟一個(gè)報(bào)告，我們需要在 antd 的 issue 小助手 上面提交問(wèn)題，
為什么我們需要這樣做呢？因?yàn)榇笮偷拈_(kāi)源項(xiàng)目，可能都會(huì)收到上百成千的 issue，但是這些 issue 提的風(fēng)格迥異，會(huì)對(duì)社區(qū)協(xié)作者造成很大的困擾，用戶和社區(qū)互相折磨。 - 關(guān)于如何創(chuàng)建一個(gè)好的 Bug 的報(bào)告，可以看看這兩篇文章：How-To-Ask-Questions-The-Smart-Way 和 如何有效地報(bào)告 Bug。
基本上我們得到這些要素信息之后，我們就可以開(kāi)始嘗試去給社區(qū)做一些簡(jiǎn)單的貢獻(xiàn)，下面我就通過(guò)一個(gè)例子給大家演示下一個(gè) PR 的合并過(guò)程。
挑選問(wèn)題，開(kāi)始挑戰(zhàn)
我們的 PR 一般都是去修復(fù) Bug 或者去添加一個(gè)新的功能，當(dāng)我們剛開(kāi)始參與一個(gè)開(kāi)源項(xiàng)目的時(shí)候，我們可以從 Good First Issue 開(kāi)始，大多數(shù)的開(kāi)源項(xiàng)目都會(huì)給一些簡(jiǎn)單的問(wèn)題加上 good first issue 的標(biāo)簽，
antd 就有這樣被標(biāo)記的問(wèn)題，但是一般的活躍社區(qū)這樣的問(wèn)題都比較搶手，
可能問(wèn)題剛發(fā)出來(lái)就被別人領(lǐng)取之后開(kāi)始修復(fù)了，但是除了這些問(wèn)題之外，在 antd 還有一類(lèi)問(wèn)題我覺(jué)得難度適中，可以作為一些入門(mén)的問(wèn)題來(lái)嘗試。
在 antd 的 issue 中，有一類(lèi)問(wèn)題被 help wanted 的標(biāo)簽標(biāo)記，這些問(wèn)題大多都是一些用戶提的需求或者簡(jiǎn)單的 Bug，我們可以從這些問(wèn)題入手，比如我上周六在 issue 列表中，發(fā)現(xiàn)了這個(gè) help wanted 的問(wèn)題。
我看到這個(gè)問(wèn)題的時(shí)候，報(bào)告人已經(jīng)做了一些研究，似乎是 referer HTTP 頭信息造成的。一般在開(kāi)源社區(qū)中，如果你想修復(fù)這個(gè)問(wèn)題，你就可以在下方留言自己已經(jīng)在嘗試修復(fù)這個(gè)問(wèn)題或者 @ 社區(qū)協(xié)作者
詢問(wèn)看你能不能?chē)L試修復(fù)這個(gè)問(wèn)題。因?yàn)槲覜](méi)看到別人的留言，我就開(kāi)始了一些嘗試去修復(fù)這個(gè)問(wèn)題。
嘗試修復(fù)，提交 PR
首先，我沒(méi)有在自己的網(wǎng)站或者公司的網(wǎng)站中使用過(guò) codesandbox，所以集成 codesandbox 對(duì)我來(lái)說(shuō)是個(gè)陌生的事情。
但是能夠發(fā)現(xiàn)問(wèn)題報(bào)告人似乎已經(jīng)做出了研究，那我能不能順著提問(wèn)者的思路去解決這個(gè)問(wèn)題呢？
關(guān)于 referer 你可以查閱它的一些標(biāo)準(zhǔn)，你會(huì)發(fā)現(xiàn)它還有個(gè)歷史遺留問(wèn)題。referer 實(shí)際上是 "referrer" 誤拼寫(xiě)。
看完之后我還看到了阮一峰老師的博客，但是實(shí)際上文章中有點(diǎn)小錯(cuò)誤，我已經(jīng)留言了，可能阮一峰老師還沒(méi)來(lái)得及看。
關(guān)于 referer 的相關(guān)信息我就不再贅述，可以查看上面的鏈接文章。當(dāng)時(shí)我想能不能就簡(jiǎn)單暴力的設(shè)置 <meta name="referrer" content="no-referrer"> 來(lái)解決呢？它表示我們對(duì)于任何請(qǐng)求都不帶 referrer 信息。我在本地測(cè)試發(fā)現(xiàn)確實(shí)有效。
因?yàn)槲矣X(jué)得也許這個(gè)功能對(duì)于 antd 來(lái)說(shuō)本身沒(méi)有什么影響，所以我就提交了這份代碼。
在 antd 中提交 PR，跟提交問(wèn)題報(bào)告一樣也需要遵循一份 PR 的提交模板，這份模板是放在 .github 目錄下的,
它也有中文版，所以我就不再描述里面的內(nèi)容，因?yàn)槲矣X(jué)得還是比較清晰的。
我的 PR 是修復(fù) Bug，所以根據(jù)我們從貢獻(xiàn)指南中獲取到的信息來(lái)說(shuō)，我們應(yīng)該創(chuàng)建一個(gè) PR 到 master 分支并填好 PR 的相關(guān)信息：
到這里，似乎大功告成，坐等 PR 被合并了(我在 PR 的信息中使用了 Github 關(guān)聯(lián) PR 和 issue 的功能 "Fixes #22636"，查看用法)。
收到建議，重新修改
但是實(shí)際上沒(méi)有那么順利，一般我們?cè)谔峤?PR 之后，大概率會(huì)收到社區(qū)協(xié)作者的 code review，在 antd 中，會(huì)有??來(lái)幫你分配 reviewer。我的 PR 被 afc163 大神 review 了，收到了如下的評(píng)論：
在和 afc163 交流之后，我們確定需要只對(duì) codesandbox 做特殊的處理，所以我就開(kāi)始了一次新的嘗試。
首先，從思路上來(lái)說(shuō)，目前想要做這種特殊的處理，我們只能對(duì)使用特殊的標(biāo)簽來(lái)處理這種情況，具體支持單獨(dú)設(shè)置 referer 的標(biāo)簽可以查閱這個(gè)文檔。
同時(shí)我還去查閱了 codesandbox 的官方文檔，我發(fā)現(xiàn)他們提供的定義接口其實(shí)不光支持 post 請(qǐng)求，同時(shí)還支持 get 請(qǐng)求:
那我立刻有了思路，我可以直接使用 <a> 標(biāo)簽來(lái)發(fā)送 get 請(qǐng)求解決這個(gè)問(wèn)題，我立刻修改代碼發(fā)送了 get 請(qǐng)求并且設(shè)置了 referer 規(guī)則：
<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" // {/* 這個(gè)屬性詳見(jiàn) https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA*/}
rel="noopener noreferrer" // {/* 設(shè)置不帶 referrer 信息 */}
target="_blank"
href={`https://codesandbox.io/api/v1/sandboxes/define?parameters=${compress(
JSON.stringify(codesanboxPrefillConfig),
)}`} {/* 生成參數(shù) */}
className="code-box-codesandbox"
onClick={() => this.track({ type: 'codesandbox', demo: meta.id })}
/>
</Tooltip>
</form>
我提交這段代碼，然后順利的通過(guò)了 afc163 的 review，然后代碼就可以順利的合進(jìn)了 master 分支了，我們關(guān)聯(lián)的問(wèn)題 Github 也會(huì)自動(dòng)的關(guān)閉。
但是這樣確實(shí)就真的解決問(wèn)題了嗎？但是我到這一步還是沒(méi)能找到問(wèn)題所在，為什么會(huì)像問(wèn)題里面說(shuō)的突然這幾天就出問(wèn)題呢？
排查問(wèn)題，繼續(xù)跟蹤
我好奇的是為什么這個(gè)東西會(huì)突然出問(wèn)題呢？然后我就去翻了 master 分支的提交記錄，發(fā)現(xiàn)并沒(méi)有最近的跟它相關(guān)的提交修改記錄，所以我就去了 codesandbox 官方文檔又看了看，然后找到了一個(gè)他們官方的 demo。
我發(fā)現(xiàn)他們的 demo 也是需要重定向的，所以我覺(jué)得這應(yīng)該不是 antd 的修改造成的問(wèn)題。然后我又在官網(wǎng)上發(fā)現(xiàn)了他們的 codesandbox-client 開(kāi)源倉(cāng)庫(kù)。
找到三方依賴的倉(cāng)庫(kù)，我們就可以提交一個(gè) issue 去讓他們幫忙查查看，另外也可以看看別人有沒(méi)有這個(gè)問(wèn)題，所以我創(chuàng)建了這個(gè) issue 來(lái)繼續(xù)跟蹤這個(gè)問(wèn)題。
終于在三天之后，我收到了該社區(qū)的回復(fù)，我們發(fā)現(xiàn)其他人也有和 antd 類(lèi)似的問(wèn)題。該社區(qū)的協(xié)作者迅速的修復(fù)了這個(gè)問(wèn)題。
他們解釋說(shuō)這是他們最近后端的一個(gè)跨域修改造成的，但是沒(méi)有說(shuō)明具體的細(xì)節(jié)，然后迅速的解決了這個(gè)問(wèn)題。
回滾代碼，解決問(wèn)題
當(dāng) codesandbox 的問(wèn)題修復(fù)之后，我也按照上面的流程再次發(fā)起了一個(gè) PR 去回滾了我的代碼，因?yàn)榭梢钥吹轿以谏厦娴拇a中加入了一個(gè) FIXME，我的那種修改只是一種暫時(shí)的解決方案，因?yàn)槲业男薷姆桨笗?huì)與其他幾個(gè)三方的鏈接模式不一致，
所以我在這個(gè) PR 中回滾了代碼。
到此為止，我們就真正意義上的解決了這個(gè)問(wèn)題，我們也完整的走完了一個(gè)給 antd 貢獻(xiàn)的流程。希望我的這篇記錄能對(duì)你嘗試在 antd 社區(qū)貢獻(xiàn)有幫助！
此外我還在 antd 開(kāi)了個(gè)跟骨架屏相關(guān)的坑，歡迎大家來(lái) antd 一起填坑！
參考鏈接
文章鏈接
文章首發(fā)于： Rustin 的博客
同步更新：
