從 0 開始，成為 Ant-Design Contributor

前言的前言

第一次寫公眾號，這篇文章寫于的是今年的暑假，樓主現(xiàn)在已經(jīng)開始正式工作了(也在之后的時(shí)間里成為了項(xiàng)目的 collaborator，但可能還是經(jīng)驗(yàn)不足和時(shí)間原因，之后也沒有啥時(shí)間去參與其中的開發(fā)了)，可能當(dāng)時(shí)的文章現(xiàn)在看來有些幼稚了，但還是希望這篇文章能輸出一些經(jīng)驗(yàn)?zāi)苡糜趯W(xué)習(xí)的。現(xiàn)在樓主正在做前端架構(gòu)相關(guān)的工作和學(xué)習(xí)。

希望以后能在公眾號中輸出一些有質(zhì)量和價(jià)值的文章，不過工作會比較忙，可能更新不太頻繁。

正文介紹

大家好，我是 zoomdong，一名大三的學(xué)生，目前在北京實(shí)習(xí)。想給大家分享一下我最近給 Ant-design貢獻(xiàn)代碼的經(jīng)歷，同時(shí)也希望能引導(dǎo)大家來一起參與其中，一起為開源世界來貢獻(xiàn)自己的力量！

前言

關(guān)于 Ant-Desgin，我想不用我做過多的介紹，大家或多或少有對其有所耳聞。作為一個(gè)頂級的“設(shè)計(jì)語言和研發(fā)框架”，antd 在國內(nèi)乃至全世界都是十分受歡迎的。截止到這篇文章完成之前，antd 的 star 數(shù)也成功突破了 60k 這一關(guān)口，master 分支的 commit 數(shù)目也高達(dá) 1萬8千多，這反映了 antd 的受歡迎程度以及核心貢獻(xiàn)者們對 issue 處理的效率之高。

我是從大二學(xué)習(xí)前端時(shí)在學(xué)長的推薦下開始使用這個(gè)框架的，在校時(shí)使用 react + antd + dva 完成了許許多多的項(xiàng)目。同時(shí)，就在今年，我也開始加入到了 antd 這個(gè)項(xiàng)目的貢獻(xiàn)中去，在這個(gè)月第一次給 antd 修復(fù)了bug，成功成為了一名 antd 的contributor了。

貢獻(xiàn) Pull Request 的流程

再開始做出貢獻(xiàn)之前，建議先去 antd 官網(wǎng)的參考一下項(xiàng)目的貢獻(xiàn)流程。

Ant-design 的代碼目前全部開源在 GitHub,遵循 MIT 開源協(xié)議。如果想為 antd 貢獻(xiàn)自己的代碼需要做以下幾方面的工作：

1、拷貝 fork 過來的項(xiàng)目

先將antd的代碼 fork 一份到自己的倉庫，然后 clone 下來，并添加主代碼庫：

//?將?fork?過來的倉庫?clone?到本地
//?clone?速度太慢可以嘗試配置代理
git?clone?https://github.com/{username}/ant-design.git
cd?ant-design
//?添加主代碼庫
git?remote?add?upstream?https://github.com/ant-design/ant-design.git

2、分支管理

antd 的貢獻(xiàn)流程里面有提過：修復(fù) bug 反饋到 master 分支；新增 feature 反饋到 feature 分支。

基于我們之前有添加主倉庫，如果我們想與主倉庫對應(yīng)的分支保持同步的話，使用 git rebase 即可：

//?拉取主倉庫的代碼
git?fetch?upstream
//?同步對應(yīng)分支的代碼
git?rebase?upstream/master
git?rebase?upstream/feature

以我之前的一次 pr 作為例子: 這次 pr 因?yàn)槭切略隽?feature，因此我們從 feature 分支切一個(gè)分支出來即可:

//?先從?master?切換至?feature
git?checkout?feature
//?然后從?feature?上切一個(gè)新的分支出來
git?checkout?-b?feature-xxx

然后我們在這個(gè)feature 分支完成開發(fā)即可，同步之前提交使用 git rebase 即可。

3、提交 pr

我們先將自己的修改提交到自己 fork 過來的倉庫相對應(yīng)的分支上面去。

git?add?修改文件
git?commit?-m?"xxx"
git?push?origin?feature-xxx

這里要注意 commit 信息的規(guī)范，可以參考阮一峰老師博客。

在提交成功之后，我們直接到 github 上面提交這份 pr，antd 的 pr 是會自動生成模版的，跟著模塊相關(guān)的信息去填寫即可，注意這里 pr 給 antd 的分支時(shí)同樣要注意是 master 還是 feature 分支。

4、修改 pr

如果有大佬 review 了你的提交并給出了修改意見，因?yàn)楹艽蟛糠值?pr 其實(shí)都會被指出意見，我們這里虛心去接受大佬的指導(dǎo)然后做出修改即可:

git?add?修改文件
git?commit?-m?"fix:?xxxx"
git?fetch?upstream
//?這里注意分支
git?rebase?upstream/feature
//?然后將修改提交到之前到分支，這時(shí)候github會自動幫你把提交同步過去的
git?push?origin?feature-xxx

貢獻(xiàn)實(shí)戰(zhàn)

這里結(jié)合我前幾天自己的一次貢獻(xiàn)經(jīng)歷來給大家實(shí)際展現(xiàn)一個(gè)具體的貢獻(xiàn)流程是怎么樣的～

1. 找到 issue 并分析

之前也有說過，antd 一般有兩種 pr：修復(fù)一個(gè) bug 或者貢獻(xiàn)一個(gè)新的feature。第一次參加某個(gè)開源項(xiàng)目一般都是從這個(gè)項(xiàng)目的 good First Issue入手，同樣在 antd 里面這樣的 issue 可以提供給開發(fā)者去解決。同樣也會有一些 help wanted 標(biāo)簽的 issue 給開發(fā)者去解決，這樣的問題一般都會有用戶提供復(fù)現(xiàn)的連接，我們可以從這方面來開始入手，于是我找到了這樣的一個(gè) issue:

這是去年的一個(gè)issue，我看到這個(gè) issue 問題的問題的時(shí)候，里面已經(jīng)有大佬關(guān)于這個(gè) issue 做了一些討論。

實(shí)際上，我并沒有使用過 Typography 這個(gè)組件，于是我去 ant-design 的官網(wǎng)查閱了相關(guān)的 api 文檔，大概知道了這是個(gè)用于做文章排版的組件，報(bào)告人對當(dāng)前改組件里面一個(gè) Paragraph 設(shè)置的自動隱藏的按鈕并不是特別滿意，他希望能提供出一個(gè) api 供他自己去定制這個(gè)省略的按鈕。

這個(gè)時(shí)候我們就大概知道了報(bào)告人希望改善的地方在哪里了，然后參考了下面大佬的一些討論，我需要在 Typography.Paragraph 里面提供一個(gè) symblol 參數(shù)來讓他去自定義省略展開按鈕的樣式。同時(shí)這個(gè)參數(shù)的類型應(yīng)該是 React.ReactNode。

2. 編寫代碼并提交 pr

于是按照上面的邏輯打開了 antd 的源碼，從 feature ?分支切出一個(gè)新的 feature-typography 分支。找到我們要修改的組件所在的文件夾，一般組件名都會在 components 下面有個(gè)對應(yīng)的文件，找到這個(gè)文件即可，這里就是 typography。

這里我大概分析出來了我要加的地方之后，然后先在本地啟動 antd。

//?安裝項(xiàng)目依賴
npm?install
//?本地開啟端口訪問
npm?run?start

一般項(xiàng)目都運(yùn)行在本地的8000 端口上，我們直接去訪問即可。我們在typography里面對應(yīng)的代碼邏輯里面添加了相應(yīng)的邏輯之后，這時(shí)我們想看看自己的修改是否生效，這里就可以使用 antd 本地跑起來的官網(wǎng)上的 demo 來做測試用例。

我們可以看到：

最開始的省略號是默認(rèn)的“展開”字符，這里我們通過新增的 api 往里面?zhèn)鬟f我們自己的參數(shù)：

那么這個(gè)地方就可以是用戶自定義的了?？瓷先ヒ磺卸即蠊Ω娉闪耍谑俏野凑丈厦嫣峤?pr 的邏輯開了 pr 到 antd 的主倉庫。

注意這里我提交pr的分支是 feature 分支，同時(shí)按照 antd 的 template 填好相關(guān)的信息。大概過一段時(shí)間之后就會有核心貢獻(xiàn)者來 review 你的pr，不得不說 antd 的貢獻(xiàn)者們都是極其活躍的，不一會兒 pr 就有人 review 了。

3. 代碼 review 并做出修改

沒過多久 afc163 大佬就看到了我的 pr,然后做了review：

因?yàn)槭堑谝淮翁峤唬抑辉诒镜嘏苓^了 Typography 這個(gè)組件的測試就開了pr,發(fā)現(xiàn)有個(gè) lint 檢查是沒有通過的。于是這里要注意的是，本地提交之前要先運(yùn)行好 npm run test 和 npm run lint 以確保所有的代碼檢驗(yàn)都通過。

在本地修改了 lint error 的代碼邏輯之后，我重新提交了代碼，然后再次收到了 afc163 的建議：

注意，加測試其實(shí)是一個(gè)很重要的步驟，尤其是對于這種組件庫代碼而言，之前我在修復(fù)另外一個(gè)bug的時(shí)候,afc163 大佬也有給過建議。

這里我們就直接去 Typography 組件下的tests目錄去加上對應(yīng)的測試用例:

然后加完之后確保測試用例通過運(yùn)行可以使用：

//?運(yùn)行指定的?Typography?組件測試代碼
npm?test?--?--watch?Typography

等樣例都運(yùn)行通過之后再去提交新一輪的代碼。最后 afc163 大佬給了一個(gè) api 文檔的描述錯誤，我簡單做了修改之后這次pr，就被成功的合并了。

到這一步的時(shí)候，就已經(jīng)成功成為一名 antd 的 contributor了。

總結(jié)

在我看來，開源其實(shí)一直是一個(gè)重在參與、或者說是圖一樂的事情。在我大二那年的時(shí)候，我發(fā)現(xiàn)了 github 這個(gè)世界最龐大的開源社區(qū)，便沉迷于此不可自拔，這真的是一件很有意義且有意思的事情，不過是閱讀大佬的代碼還是在社區(qū)修一些力所能及的bug。

希望能用這篇文章，給更多想?yún)⒓娱_源卻不知道從何下手的人做一個(gè)簡單的入門講解。開源并不是一件很困難的事情，入門也遠(yuǎn)沒有你所想象的那么困難。一個(gè)項(xiàng)目的發(fā)展，抑或是一個(gè)生態(tài)的形成，項(xiàng)目的核心貢獻(xiàn)者們固然起到了重要的作用，但同樣也離不開像我們這樣的使用項(xiàng)目并去給拓展項(xiàng)目生態(tài)的人，經(jīng)過無數(shù)次的修改，一個(gè)真正能夠造福使用者的項(xiàng)目或者是生態(tài)才能夠成形。

讓我們一起加入其中吧～

相關(guān)文章

如何快速的成為 Ant Design 的contributor:?https://zhuanlan.zhihu.com/p/123367842

為 Node.js 貢獻(xiàn)你的力量:?https://zhuanlan.zhihu.com/p/27932211