参考资料一波
最近在学习Vue3.0源码，为了达到刻意练习的目的。决定给Vue3.0提点PR来验证自己的源码理解水平。经过两天的奋战添加了一个官方的todo test case。
以下我把大体的步骤总结一下。
Fork代码
首先需要将vue代码通过github的fork功能复制一份到自己的github
复制后的结果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
功能点或测试用例开发
选择功能点
比如我想解决的这个问题是这个尤大遗留的这个测试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）： | 是不是每一行都执行了？ |
