为Github开源项目做贡献的经历

1,163 阅读4分钟

前言

  在实习的时候接触到了Vue2早期的版本和vue-element-admin等一些优秀的开源项目,在后面的工作中都是具体的业务开发,总觉得开源项目离我们普通开发者太远,用好开源即可,对开源的贡献大佬只有仰慕的份😂。
  后来深入的学习前端后,会去钻研源码和框架的内部原理,有时候也会尝试去写一个简易版的框架运行起来。开源似乎也不是离我们那么的遥远,于是尝试着去对一些开源项目提issue和pr,fast-vue3是第一个从头开始参与的github开源项目,一开始只是抱着试试的心态去尝试提交代码,短短的20多天收获的star总数超过200+。

方式

参与开源项目大体来说有几种方式:

  • 报告 bug或建议(issue)
  • 翻译文档(translate)
  • 提交代码(pull request)

在开源框架下一般会有作者的联系方式,大部分是QQ、微信这些,联系作者后提出愿意开源的想法,一般都会收到欢迎贡献的回复🤝,太牛的项目就不一定了😀,可以和作者沟通想法,尤其是新的feat,以往有试过把feat的功能做出来了但是不符合作者对于框架的设想,最后不了了之了。

88c037ce805fa7bf92b535aa88eeee5.jpg

首先呢,先把你想要贡献的代码库fork一份到你的仓库里,这样你就有了一份基于主仓库的能自己随心所欲修改的源码

微信截图_20220220183903.png

image.png

git clone  https://github.com/{username}/fast-vue3.git
// 添加上游代码库地址,随时可以和上游仓库的代码进行同步
git remote add upstream https://github.com/study-vue3/fast-vue3.git

接下来是基于你想贡献代码的分支去创建新的分支

git checkout -b mybranch origin/xxx`

创建完成就可以基于远程的代码修改之后提交了

Issue

使用该第三方库或者在run代码的时候有什么报错、问题可以在github发起issue,提交之后作者和贡献者就能看到,为你解答或者解决问题

微信截图_20220220184353.png

微信截图_20220220184636.png

一个完整的issue可以帮助开发者更好的推进和完善项目,提issue的时候尽可能详细地描述自己对于框架的所需或问题,方便开源贡献者了解并处理和完善。

Translate

fast-vue3为例,最近为fast-vue3的代码贡献了相关的外语翻译(英语、日语(虽然可能没啥用,但是作为日语宅我的小执着)),推荐使用Vscode + Markdown Preview Enhanced 插件来写翻译的md文档,所见即所得,个人强烈推荐

image.png

Pull Request

PR也是代码贡献中比较考验技术但也最有成就的一步了,需要去读懂代码仓库的代码并且在此基础上贡献自己的代码,最终合并到主分支的过程。然后你的代码就会被用在别人的代码里啦!!

// 拉取上游代码库的代码
git fetch upstream
// 同步对应分支的代码
git rebase upstream/master
git rebase upstream/feat

开发代码完成后提交的规范可参考阮一峰博客 ,以及合理的使用git rebase来优化你的提交的commit,避免杂乱的commit记录。

image.png

image.png

代码pr之后会生成提交记录,作者会对代码进行review,确认没有问题之后会通过然后合并到主仓库

image.png

这就完成了一次基本pr操作并成为了contributor了

总结

加入开源社区并参与开源项目贡献可以让你更加深刻地了解到一个开源项目的成长历程,对个人的成长和履历都有不小的帮助,刚开始可以从小的事情做起,提一个issue,改一个翻译,用自己的所学所知力所能及地去帮助别人是一件非常有成就的事情。

附上一张萌新的参与contributor图,在接下来的日子里会不断的去增加有色方格的数量,共勉!! image.png

关于fast-vue3

fast-vue3是一个集Vue3+Vite+Ts+Pinia+...快速开发vue3的模板框架,旨在提供一套完整的模板方案,包含模板和脚手架等,正在有序地快速迭代,期待你的加入!

7904edb0f83cf1861c76dec49d6cb84.png