如何参加开源项目-如何给Vue3.0提PR

6,637 阅读3分钟

欢迎大家加入一起共同学习进步。

最新消息和优秀文章我会第一时间推送的。

视频讲解 b站视频 www.bilibili.com/video/BV1fa…

参考资料一波

Vue3.0代码结构

Vue3.0资源全家桶

最近在学习Vue3.0源码,为了达到刻意练习的目的。决定给Vue3.0提点PR来验证自己的源码理解水平。经过两天的奋战添加了一个官方的todo test case。

github.com/vuejs/vue-n…

以下我把大体的步骤总结一下。

Fork代码

首先需要将vue代码通过github的fork功能复制一份到自己的github

github.com/vuejs/vue-n…

复制后的结果 github.com/su37josephx…

clone到本地

git clone git@github.com:su37josephxia/vue-next.git

安装依赖

# 设置国内镜像
yarn config set registry https://registry.npm.taobao.org
# --ignore-scripts  用于忽略chrome浏览器的下载
yarn install --ignore-scripts  

运行单元测试

# 强烈推荐大家全局安装
npm i jest -g 
jest --coverage

开发前同步官方最新代码

fork代码需要随时拉去官方最新的代码更新保持同步

添加新远程分支

这个只需要做一次

git remote add upstream https://github.com/vuejs/vue-next

拉去合并远程分支到master分支

这个需要随时做 保持你的master分支永远是官方最新成果。

# 抓取源仓库修改 master分支
git fetch upstream master
# 切换分支
git checkout master
# 合并远程分支
git merge upstream/master

功能点或测试用例开发

Jest基础知识的总结

选择功能点

比如我想解决的这个问题是这个尤大遗留的这个测试TODO

从master分支创建修改分支

git checkout -b comments

开发代码

开发后的结果大概是这个样子

伺服运行单个测试用例

jest packages/compiler-core/__tests__/transforms/vIf.spec.ts --watc

如何跑覆盖率

开发完成后记得要跑全覆盖 确认自己的代码对全局没有影响。

jest --coverage

提交commit

这里面涉及到一个问题就是必须要按照官方需要的格式提交commit msg。不然那会被hooks进行自动检查拒绝你commit。 github.com/conventiona…

git commit -am 'test(compiler-core): add vif with comments test case'

提出PR

推送本地分支到github

git push --set-upstream origin comments

如何合并多余commit

另外如果涉及多次提交会有一个要处理合并多个commit的问题。

TODO 近期更新

提PR

最后就可以等待着你胜利的好消息了

最后

刻意练习才是提高的不二法门 大家如果要阅读源码不妨给自己顶一个成功提出一次PR的小目标。

附录

代码结构

数据响应式 reactivity reactivity ref effect
运行时 runtime-core 核心 inject 生命周期 watch directive component
runtime-dom Dom class style
runtime-test 测试仿真
编译器 compiler-core 核心 基本类型解析 AST
compiler-dom Dom v-html v-text v-model v-clock
compiler-sfc 单文件编译
compiler-ssr 服务端渲染编译
工具方法 shared
vue vue
模板解析器 template

Jest的覆盖率是什么

覆盖率 我们增加一个参数把覆盖率跑出来

npx jest --coverage 

实际上跑覆盖率的时候是有错的 我们先不去管他 我们先解析一下这个报告怎么看,如果大家学过软件工程会知道一般从理论上讲覆盖率包括

语句覆盖 节点覆盖 路径覆盖 条件组合覆盖 但是一般来讲不同框架理解不一样 在Jest这里大概是这样分解的

%stmts 是语句覆盖率(statement coverage) 是不是每个语句都执行了?
%Branch 分支覆盖率(branch coverage): 是不是每个if代码块都执行了?
%Funcs 函数覆盖率(function coverage): 是不是每个函数都调用了?
%Lines 行覆盖率(line coverage): 是不是每一行都执行了?