记录一次ElementPlus pr被merge

snowbitx
874 阅读3分钟

1.业务背景

源码课程群里有位兄弟提出来个需求，ant-design-vue可以实现级联时仅展示父级标签，ElementPlus不支持（默认展示了全部层级label），由于之前被Vue官方团队成员 @远方os指导过一次pr，信心倍增（大佬耐心指导，再次感谢），尝试自己做一下。
image.png

附上pr链接 github.com/element-plu…

远方os最新录制的源码课程手把手教你学源码，带着群友参加开源项目，性价比非常高，非常推荐！！

2.提交pr流程

  • fork一下要提交pr的开源仓库，然后本地迁个分支（后续所有的commit都会合并到一个pr中）
  • 提交代码前要拉远程分支合并，避免冲突提交
    1.设置远程地址（设置一次就行）
    git remote add upstream https://github.com/xxxx.git
    2.拉代码合并主分支
    git fetch upstream
    git pull upstream dev
    git merge upstream/dev // 也可能是main 看源仓库是哪个
    3.按格式提交后发起合并，打开fork后的仓库就能看到create pull
  • 注意pr的标题格式和描述
    pr规范 标题的格式可以看下仓库首页一般都有链接说明，我是直接去别人已合并的pr去拷贝了下格式~
    描述要尽可能简短的描述清楚自己的功能，可以加上在线链接案例，更容易其他成员理解，在线案例平台可以用ElementPlus playground或vue playground

3.坎坷的commit，一共改了三版

  • 第一版我加了个参数top_level_only，功能是实现了，但是团队成员觉得为什么不用插槽支持更灵活的自定义操作呢，类似el-select tag那种。

image.png

  • 第二版将props改为slot,为了避免破坏性更新我重新构造了一份带level的节点json数据只存 label和value。能满足我的基本需求，review回复这种方式不够灵活，应该直接能拿到更多的节点信息。

image.png

  • 第三版取了源码中的所有节点信息传入插槽。随后又在测试用例挣扎数次（测试用例写的太痛苦了），最后补充完文档后，大佬就给approve了。隔了一天成功被merge（element团队成员太高效了 点赞！）

image.png

4.开发中遇到的问题

  • 版本问题 开源项目一般都是pnpm+monorepo模式构建，可以看package.json中配置文件会标注pnpm版本，node一般是20以上即可。如果使用了nvm可以使用corepack固定版本
corepack enable 
corepack prepare pnpm@9.5.0 --activate

我在开发结束后commit一直报错依赖包有问题无法触发eslintFailed to load plugin "import-x'declared ...，查看了包是引入成功，版本也能对的上，但就是无法commit。后面是降级到node18重新安装搞好的，非常折磨..

  • 代码规范问题 开源项目提交pr后会做很多检测，所以功能要尽可能小的损耗去实现。比如provide传入props，子组件都可以接收到，包的体积会变大，导致pr检测不通过，这种情况下是不会被merge的

  • commit后发现有很多自动格式化提交，使用命令忽略钩子即可
    git commit -m "your commit message" --no-verify

avatar
文章
阅读
粉丝