如何成为开源组件库NutUI的contributor：解决issue并提交PR

news2024/12/19 18:58:23

前言

NutUI 是一套京东风格的轻量级移动端组件库。自诞生以来，一直在紧跟技术的发展不断推陈出新，始终保持稳健的发展态势，从一个单一的基础组件库发展到如今服务于数千开发者的多端 UI 组件库。NutUI 的成长离不开团队成员的努力，更离不开广大社区开发者的反馈和共建。

因此本文就以一个新人视角来完成一次issue的解决以及PR的提交，成为NutUI的共建者，为开源社区共享自己的一份力量！
在这里插入图片描述

贡献指南

一、fork项目：

首先打开NutUI-React的GitHub仓库地址，点击fork项目，然后就可以在自己的repositories列表打开刚刚fork的项目。
在这里插入图片描述

二、clone代码：

clone 仓库代码到本地，并同步主仓库的最新代码。

git clone https://github.com/jdf2e/nutui-react
cd nutui-react

查看远程仓库信息：

git remote -v

添加自己仓库的地址：

git remote add myeslf https://github.com/beginnerZhang/nutui-react

在这里插入图片描述

三、运行项目

1.本项目为 pnpm monorepo 仓库，要求使用 pnpm 安装项目依赖。

pnpm install

Monorepo 是一种项目代码管理方式，指单个仓库中管理多个项目，有助于简化代码共享、版本控制、构建和部署等方面的复杂性，并提供更好的可重用性和协作性。

这一步报错的可以使用npm install pnpm -g先把pnpm安装了。

2.运行 Taro demo：这里以微信小程序为例。
注意：启动 taro 版本的 demo，需要 taro 3.6.x。

pnpm dev:taro:weapp

这将会在packages/nutui-taro-demo下生成一个dist/weapp文件夹，然后使用微信开发者工具导入此文件夹，效果如下：
在这里插入图片描述

四、解决issue

五、提交PR

1.所有代码改动在提交前都应该通过以下测试：
单元测试：pnpm test
Eslint 检查：pnpm lint
同时在 commit 时，会自动进行 Prettier 格式化以及 Eslint 修复。若 commit 失败，请再次执行上面的命令，检查是否通过了 lint 插件。

2.之后就是代码提交流程了：

git add .
git commit -m "xxx"
git push

其中commit的类型可以是：upd chore docs feat fix test refactor revert style releas
例如：fix(Dialog): 点击蒙层无法关闭

3.然后打开我们的Github仓库，在点击New Pull request：
在这里插入图片描述
然后点击Create pull request，在PR模板中填写相关信息，点击提交。

4.之后就可以在主仓库的Pull requests里看到我们的PR了，PR 会在 Review 通过后被合并到主仓库，然后等待 NutUI-React 发布新版本（每周一次）。

Pull Request 规范

每个 PR 只解决单个问题或者新增单个功能；
当新增组件或修改原有组件时，同步更改对应的单元测试和文档，保证代码的稳定；
commit message 请遵循 Angular Style Commit Message Conventions 规范；
PR 信息中最好包括修改了哪个组件，解决了哪个问题，并关联 github 上对应的 issue 链接

可能出现的问题

要及时更新我们fork的库，保持与主仓库的同步，如果出现以下问题，可以直接在Github上点击Discard 1 commit及Update branch来解决。
在这里插入图片描述
本地可能会出现这种问题：Your branch is ahead of 'origin/next' by 9 commits.
解决方法：执行以下命令来将本地分支重置到与远程仓库一致，将强制将本地分支移动到与远程分支 origin/next 相同的提交，丢弃本地分支上的所有不同。

PS D:\work\swipe_test\nutui-react> git reset --hard origin/next
HEAD is now at 5c161846 chore(release): v2.0.20
PS D:\work\swipe_test\nutui-react> git status
On branch next
Your branch is up to date with 'origin/next'.