大家好，我是速凍魚 ??，一條水系前端 ??，喜歡花里胡哨 ??，持續(xù)沙雕 ??，是隔壁寒草 ?? 的好兄弟，剛開始寫文章。如果喜歡我的文章，可以關(guān)注 ? 點贊，為我注入能量，與我一同成長吧～

閱讀本文 ??

1.您將了解到發(fā)現(xiàn)了開源項目出現(xiàn)的 bug 我們可以怎么做

2.您將了解到如何快速定位開源項目BUG問題所在

3.您將了解到如何參與開源項目bug修復(fù)并提交PR成為Contributes

NaiveUI 倉庫地址：NaiveUI^[1]??

如果你正在學(xué)習(xí)vue3+TS，那么我建議你可以關(guān)注一下NaiveUI，一個很棒的vue3組件庫^_^，文中開源項目便指的它 ??。

前言 ??

根據(jù)需求，需要編寫一個基于 vue3+TS 的聊天室 web 應(yīng)用，其中發(fā)現(xiàn)開源項目 bug 并提交 pr 成功合并 ??

發(fā)現(xiàn) Bug??

起因 ??

因為在研究vue3+TS的項目，我就想著去github上找找有沒有vue3+TS的組件庫，想到之前尤大 ?? 推薦過的NaiveUI，star?? 已經(jīng)5.8k了，于是我便將項目下載下來玩了一下。

經(jīng)過 ??

當(dāng)時我正在玩NaiveUI的Avatar組件，這個組件原本是支持輸入文字自適應(yīng)縮放居中的 ?

但是我發(fā)現(xiàn)當(dāng)使用v-show和v-if時它的表現(xiàn)居然不同，v-show情況下輸入文字后，組件的文字沒有自動縮放居中，于是我在codesandbox^[2]里面實驗的一下，確定了這個BUG確實存在 ??，于是便有了后文。

結(jié)果??

由于不知道是不是自己寫的代碼問題，懷著揣測的心情想去搞明白究竟怎么回事 ??，我便去Issues上面搜索了一番，但是并沒有找到有小伙伴提出類似問題，于是我便提了一個Issues??

定位 Bug??

step1??

我提Issue后并沒有不管它，而是想著怎么去解決它，那么問題來了，造成這個bug的原因是什么呢 ?，所以我將NaiveUI項目下載到了我的本地，調(diào)試一波，調(diào)試了半天對問題定位一知半解，有很多疑問，這時候怎么辦呢 ?

step2??

如何快速了解這個項目某個組件的代碼呢 ? 第一肯定是自己看源碼，第二就是找作者直接問吶，哈哈哈哈 ??，于是我去找作者尋問了，怎么找到作者呢 ? 在他們官方文檔一般有個Community

通過這個你就可以開始你的沙雕提問了 ??hhhh ～～～

解決 Bug??

step1??

現(xiàn)在我們已經(jīng)知道了問題所在，那就要開始瘋狂轉(zhuǎn)動你的小腦袋 ?? 去思考怎么去coding解決這個BUG呢，我們就需要在本地不停的調(diào)式，遇到問題記得詢問，愛問才是好孩紙 ??，當(dāng)然你會遇到各種問題，不要怕，一個個解決，不會的就問，就查資料，試錯就是進(jìn)步，以下就是我解決這個BUG的核心代碼

export?default?defineComponent({
??name:?'Avatar',
??props:?avatarProps,
??setup?(props)?{
????const?{?mergedClsPrefixRef?}?=?useConfig(props)

????let?memoedTextHtml:?string?|?null?=?null
????const?textRef?=?refnull>(null)
????const?selfRef?=?refnull>(null)
????const?fitTextTransform?=?():?void?=>?{
??????const?{?value:?textEl?}?=?textRef
??????//解決BUG的核心代碼在這里^_^
??????if?(textEl)?{
????????if?(memoedTextHtml?===?null?||?memoedTextHtml?!==?textEl.innerHTML)?{
??????????memoedTextHtml?=?textEl.innerHTML
??????????const?{?value:?selfEl?}?=?selfRef
??????????if?(selfEl)?{
????????????const?{?offsetWidth:?elWidth,?offsetHeight:?elHeight?}?=?selfEl
????????????const?{?offsetWidth:?textWidth,?offsetHeight:?textHeight?}?=?textEl
????????????const?radix?=?0.9
????????????const?ratio?=?Math.min(
??????????????(elWidth?/?textWidth)?*?radix,
??????????????(elHeight?/?textHeight)?*?radix,
??????????????1
????????????)
????????????textEl.style.transform?=?`translateX(-50%)?translateY(-50%)?scale(${ratio})`
??????????}
????????}
??????}
????}

step2??

代碼我們自己修改好了，并不能代表著這個BUG就解決了，我們要提交PR???，讓開源作者 ?????檢視你的代碼是否合格，是否能夠合并進(jìn)他們的項目中，這個過程也是一個很寶貴的過程，你能和開源作者進(jìn)行交流 ???♂?，能學(xué)習(xí)到很多。當(dāng)然不是一遍就能通過的，你還得自己反復(fù)的修改，當(dāng)然作者也會幫助你，給你提出他的意見。當(dāng)然這個過程會遇到困難，你要做的就是耐心慢慢改。

看看我提交了多少次 ??PR

和貢獻(xiàn)者們進(jìn)行討論 ??(o^^o)

step3??

最后經(jīng)過你的努力，和開源作者們的幫助，你解決了這個BUG，然后通過了檢視，最后你的PR就會出現(xiàn)Merged字樣，你就完成了對開源項目的貢獻(xiàn)

收獲 ??

到這里我們終于可以長舒一口氣啦，滿滿的成就感和滿足感??，一切都是值得的，或許這就是開源的魅力吧，你成了NaiveUI的貢獻(xiàn)者之一，還可以跟我的偶像antfu(vuejs 的核心成員|vueuse 作者)同框真是幸運呢~

現(xiàn)在你也成為這個開源項目的Contributers之一啦～ ??

和偶像同框 ??

一次成功的PR帶給你的不是僅僅是成為Contributer的喜悅，是你突破困難，克服困難，和優(yōu)秀的人一起思考，一起解決問題帶來的舒適，它會帶給你信心和動力去做更多的貢獻(xiàn)，去當(dāng)一個真正的Creator，所以我也希望大家都能一起去參與開源，感受開源的魅力。??

結(jié)束語 ??

那么我的第二篇文章就結(jié)束了，文章的目的其實很簡單，就是對日常工作的總結(jié)和輸出，輸出一些覺得對大家有用的東西，菜不菜不重要，但是熱愛??，喜歡大家也能夠參與開源，邁出第一步，也同時非常感謝NaiveUI團(tuán)隊（他們解決問題的速度真的是極快）也希望通過文章認(rèn)識更多志同道合的朋友，如果你也喜歡折騰，歡迎加我好友，一起沙雕，一起進(jìn)步。

github??:sudongyu^[3]

個人博客 ?????:速凍魚 blog^[4]

vx??:sudongyuer

本文來自讀者速凍魚的投稿：

https://juejin.cn/post/7010752931993976845

往期推薦