搭建Vue3组件库:第十七章 管理组件库的pull request

简介: 本章介绍如何管理你的request pull

一个好的项目很少会由一个人来独立完成。即使你完成了所有功能实现,也需要有人给你 Review 和提建议、找 Bug。比如添加新的组件、完善文档、添加单元测试、提出改进意见。

这节课我们就介绍一下如何参与开源社区的代码贡献。对于任何一个开源项目,我们都是以陌生人的身份参与的。也就是说,你并不是项目组成员,不具备直接提交代码的权限。如果你想参与其中,最好的方式就是提交 PullRequest,等你有一定贡献的话再请求成为项目成员。


什么是 PullRequest?

PullRequst 直译过来就是拉取请求,那么拉取请求和提交代码有什么关系呢。

这里面有一个比喻,我们可以把代码比作一个团队,对于一个陌生人来讲,你很难获取信任,让你直接插手团队的管理。这个时候上帝给了你一次证明的机会,就是复制一个一模一样的团队给你。

你经过一段时间的优化管理后,可以把你的复制团队和原有团队的对比记录发送给原团队的管理者证明你优化的效果,请求将你的改进合并到原团队之中,这种行为就是代码世界的 PullRequest。显然这个世界上并没有上帝,但是代码本身是有可复制性的,可以很轻松地复制一份,这个叫做 fork。你改进后提交的合并请求就叫做 PullRequest,是你的复制分支和原分支的对比记录 + 你对改进的描述。
在这里插入图片描述

假设你要给VUE的组件库提交代码,在 GitHub 中的 PullRequest 步骤如下:

  1. 从VUE组件库 fork 代码仓库到你的仓库;
  2. 从自己仓库 clone 到本地;
  3. git add 添加你修改的代码到暂存区
  4. 提交 commit 你的更改;
  5. Push 到你的的代码仓库;
  6. 给VUE的组件库提交一个 PullRequest (拉取请求),说明你的修改内容,请求该组件作者提交。作者认为属于有价值提交的话,就会点击接受。则 Github 会将这次修改拉取到然叔的项目,这样的话就相当于给然叔组件库提交了一次代码贡献。

简单地说,整个代码贡献过程可以认为是复制 ==> 修改 ==> 提交拉取请求 ==> 接受请求。

一般我们用这里面的关键一步 PullRequest 当做整个代码贡献行为的简称。现在大家就比较清楚为什么说参与开源项目叫提 PR。


Fork 代码

Fork 实际上就是复制的意思。在 Github 中相当于将组件作者 账号中的 项目复制了一份到 自己 账号中。

在这里插入图片描述


在这里插入图片描述

点击 【Create fork】就可以了

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-C0qzX6wS-1669487626308)()]

新创建的代码在 你自己账号下,这个代码和自己常见的几乎没有差别,只是在界面上多了一点内容:

  • 来源: 表示项目复制得哪个地址;
  • 提交贡献: 这个按钮是 PullRequest 用的;
  • 同步: Sync fork,这是一个新功能,用于将源地址的最新提交拉取回本地址。

Clone 代码到本地

使用Git命令克隆代码

git clone git@github.com:geniusguys/study-ui.git

然后修改你想修改的代码,然后提交代码

在这里插入图片描述

然后在push你的代码在你的远程仓库

在这里插入图片描述

提交代码后,回到自己远程仓库的 Github 页面。这个时候就可以看到这个提交。这是一个新的功能,可以更方便你提交 PullRequest。

在这里插入图片描述

点击 【Contribute】中的 【Open pull request】按钮,就可以创建一个新的 PullRequest 了。

在这里插入图片描述

在 pull request 界面中可以看到提交的方向。这里面表明是从 自己的仓库分支 向 组件作者仓库分支 提交代码。当然这里面方向和分支都可以选择,多分支通常用于你同时要处理很多个 PullRequest 的情况,目前只处理一个分支就没有这么麻烦。

在这里插入图片描述

另外,你也可以从后面的比对中清楚地看到你修改的内容。

在这里插入图片描述

点击 【Create pull request】后,这个pullrequest 就创建成功了。这时组件库作者就收到了你的 pullrequest。


审核代码修改

当有人给组件库提交了代码贡献,其作者就可以很容易地在 【PullRequest】中看到。

在这里插入图片描述

打开后可以查阅代码变更,也可以清楚地看到这个代码 CI 运行的结果。通过这个结果就可以判断代码是否正确,也可以提出一定的改进意见,让你继续进行修改。

在这里插入图片描述

假设认为你的修改是有价值的,就可以批准你的修改。点击 Merge pull request 就可以接受这次代码合并。这时,你的代码也就合并到了 组件库作者的 仓库中了,这次代码贡献宣告胜利结束。

在开源世界中,每个人都是互不相识的。开源世界中的合作也是从陌生人到熟人的过程。有趣的 Github 给我们提供了一种陌生人参与代码贡献的可能,可以通过代码来证明自己、实现自己的价值。

相关文章
|
11天前
|
JavaScript 前端开发 索引
「Vue3系列」Vue3 条件语句/循环语句
在 Vue 3 中,你可以使用条件语句来动态地控制模板中的渲染内容。Vue 提供了多种方式来实现条件渲染,包括 `v-if`、`v-else-if`、`v-else` 和 `v-show` 指令。
31 0
|
12天前
Vue3框架中让table合计居中对齐
Vue3框架中让table合计居中对齐
|
12天前
Vue3 子/父组件相互调用
Vue3 子/父组件相互调用
33 0
|
12天前
|
JavaScript
vue3 使用element plus 打包时 报错
vue3 使用element plus 打包时 报错
18 0
|
8天前
|
JavaScript 前端开发 数据安全/隐私保护
Vue3——如何实现页面访问拦截
Vue3——如何实现页面访问拦截
|
12天前
Vue3 子传父 暴露数据 defineExpose
Vue3 子传父 暴露数据 defineExpose
Vue3 子传父 暴露数据 defineExpose
|
2天前
|
JavaScript 算法 前端开发
vue3和vue2的区别都有哪些
【4月更文挑战第15天】Vue3与Vue2在响应式系统(Proxy vs. Object.defineProperty)、组件模块化(Composition API vs. Options API)、数据变化检测(Reactive API vs. $watch)、虚拟DOM算法(基于迭代 vs. 基于递归)及Tree-Shaking支持上存在显著差异。Vue3的改进带来了更好的性能和灵活性,适合追求新技术的项目。Vue2则因其成熟稳定,适合维护大型项目。选择版本需根据项目需求、团队情况和技术追求来决定。
8 0
|
3天前
|
JavaScript
vue3+vite项目配置ESlint
vue3+vite项目配置ESlint
6 0
|
3天前
乾坤子应用配置(vue3+vite)
乾坤子应用配置(vue3+vite)
12 0