大家好，我是若川。持續組織了5個月源碼共讀活動，感興趣的可以點此加我微信 ruochuan12?參與，每周大家一起學習200行左右的源碼，共同進步。同時極力推薦訂閱我寫的《學習源碼整體架構系列》?包含20余篇源碼文章。

“

本文來自前端程序媛「清湯餃子」，餃子非常高產，點擊文末「閱讀原文」直達她的掘金主頁

”

一、背景—

在開發的工作中，我們都引用過大量的社區優秀的開源項目，但怎么才能更好的了解這些開源項目呢，答案是 Join it。

參與開源項目，能夠幫助我們拓寬對研發項目的認識，更好地理解開源項目的原理，以及提高個人影響力、競爭力。

二、選擇項目—

人對于不熟悉的東西總是覺得高深莫測的，沒有參與開源項目的經驗的時候，會對參與開源項目不知道從何下手。

其實不然，在我們開發日常需求時就可以參與到開源項目中來，開發時用到的技術棧，就是我們最值得入手的開源項目了。

像我自己日常有開發微信小程序、京東小程序等跨平臺的需求，這類型需求主要技術棧是 Taro^[1]，Taro^[2] 本身就是 github star 近 30 k 的優秀開源項目了，那么我就可以從 Taro 著手，參與到開源項目的建設工作中。

三、快速開始—

首先要了解、遵守開源項目的貢獻規范，一般可以在官網找到貢獻規范文檔，如 Taro 貢獻指南^[3]。

1. 確定貢獻形式

貢獻形式多種多樣，下面我以 “提交代碼” 類型快速開始貢獻流程。

2. 找到感興趣的 issue

“

Taro 官網：issue 中會列出所有被標記為 Help Wanted 的 Issues，并且會被分為 Easy、 Medium、 Hard 三種難易程度。

”

通過 issue 標簽篩選，選擇自己感興趣的 issue，可以先從 "Easy" 的開始：

在 issue 中 Assignees 至自己：

3. fork & clone

fork Taro 源碼至自己倉庫：

clone 個人倉庫的 Taro 源碼至本地：

git clone https://github.com/jiaozitang/taro

4. 本地開發環境

在 Taro 源碼項目中安裝依賴并編譯：

# 安裝依賴
$ yarn# 編譯
$ yarn build

查看該 issue 涉及哪些 package，為這些 package 設置 yarn link，并在本地編譯，使得調試項目能夠 link 到開發中的源碼：

“

Taro package 說明見文檔：Taro 倉庫概覽^[4]

”

# yarn link
$ cd packages/taro-components
$ yarn link# 本地編譯
$ yarn dev

新建 Taro 項目用于調試 Taro 源碼：

# 使用 npm 安裝 CLI
$ npm install -g @tarojs/cli# 初始化項目
$ taro init myApp# yarn link
$ yarn link "@tarojs/components"

5. 開始開發

5.1 功能開發

通過以下步驟解決上述 “textarea 組件 onLineChange 時間調用無效”^[5] issue：

“

源碼路徑：packages/taro-components/src/components/textarea/textarea.tsx

”

onLineChange 事件：

• 新增 onLineChange 事件

• 監聽輸入事件，輸入時通過行高計算行數

• 行數改變時觸發 onLineChange

auto-height 屬性：

• 新增 auto-height 屬性

• 新增 auto-height 樣式

具體代碼見：https://github.com/NervJS/taro/pull/10681/files

5.2 更新測試用例

在測試用例中添加對 onLineChange 事件、aotu-height 屬性的測試。

“

源碼路徑：packages/taro-components/__tests__/textarea.spec.js

”

5.3 更新文檔

在 README 中更新對 onLineChange、auto-height 的描述。

“

源碼地址：packages/taro-components/src/components/textarea/index.md

”

5.4 自測

在本地測試項目 myApp 中，自測 onLineChange 事件、auto-height 屬性功能是否正常，自測通過后，在 Taro 源碼項目中跑自動化測試。

# 自動化測試
$ npm run test

6. 提交 pull request

測試通過后，在 github 中提交 pull requrst。

7. code review 流程

提交 pull request 后等待社區 code review，并及時跟進 code review 反饋進行修改。

四、總結—

本文講述了參與大型開源項目-Taro 的流程，其中以為 Taro 解決 issue 的視角，介紹了從認領 issue、解決 issue、貢獻代碼的完整過程。

在這個過程中，我們可以了解到如何參與開源項目并幫助開源項目解決問題，在開發工作中遇到開源項目的問題時，就可以愉快地參與進來了，不用因為一個小問題耽擱項目進度。

星星之火，可以燎原，在越來越多的開發者的參與下，開源社區的發展未來可期。

參考資料—

• 如何參與一個頂級開源項目^[6]

參考資料

[1]

Taro: https://github.com/NervJS/taro

[2]

Taro: https://github.com/NervJS/taro

[3]

Taro 貢獻指南: https://taro-docs.jd.com/taro/docs/CONTRIBUTING

[4]

Taro 倉庫概覽: https://taro-docs.jd.com/taro/docs/codebase-overview

[5]

“textarea 組件 onLineChange 時間調用無效”: https://github.com/NervJS/taro/issues/8003

[6]

如何參與一個頂級開源項目: https://juejin.cn/post/6844903918749614087

·················?若川簡介?·················

你好，我是若川，畢業于江西高校。現在是一名前端開發“工程師”。寫有《學習源碼整體架構系列》20余篇，在知乎、掘金收獲超百萬閱讀。
從2014年起，每年都會寫一篇年度總結，已經寫了7篇，點擊查看年度總結。
同時，最近組織了源碼共讀活動，幫助3000+前端人學會看源碼。公眾號愿景：幫助5年內前端人走向前列。

識別上方二維碼加我微信、拉你進源碼共讀群

今日話題

略。分享、收藏、點贊、在看我的文章就是對我最大的支持～