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

前言

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
1
2

查看远程仓库信息：

git remote -v
1

添加自己仓库的地址：

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

三、运行项目

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

pnpm install
1

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

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

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

pnpm dev:taro:weapp
1

这将会在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
1
2
3

其中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'.
nothing to commit, working tree clean
1
2
3
4
5
6

相关链接

• NutUI 官网
• NutUI GitHub
• NutUI-React GitHub

最后

庞大的开源社区一定有很多值得去学习的东西，开源本身是一场历练和修行。成为 contributor 不是唯一目的，通过阅读代码和修复 bug 也是一种提升，也会认识很多志同道合的朋友。我们希望每一个开源者都能用微笑面对这一路的风景。

NutUI 的持续迭代离不开使用者和开发者的长期反馈和支持，愿大家在开源的道路上步履不停~

参考文献：
NutUI Contributor 共建视频指南（强烈推荐！此视频会一步步引导完成共建）
NutUI 贡献指南1
NutUI贡献指南2
NutUI-React 共建指南
NutUI 邀您共建，Contributor 您好

推荐阅读：
Github进行fork后如何与原仓库同步1
Github进行fork后如何与原仓库同步2