怎么启动开源项目,以vue devui为例

496 阅读4分钟

前言

最近看到很多同学一起参与到了 vue devui 中来,但是鉴于部分同学可能是刚开始接触,现在写一篇文章分享一下怎么参与到一个开源项目中来。

启动项目

通读 README.md

首先,找到一个项目想要了解项目的情况,第一个阅读我觉得是README.md,每个合格的开源项目都会有这样的一个文件,不论他的文档是否用什么其他工具生成部署,这个文件是必不可少的。这个文件会包含一些项目的简单信息,告诉你,这是什么、怎么用、具体的文档在哪(可选,有些项目直接就在 README.md 把文档给列出来),要参与贡献的话你该怎么做。 以 vue devui为例,(英文差了点的话装个翻译插件吧,手动狗头。但是能够流利阅读英文文档真的会很爽)

If you don't know how to start, please read our contributing guide

image.png

阅读贡献指南

很多人刚接触的同学都会问,项目改怎么运行起来。该怎么贡献啊? 请阅读 贡献指南

贡献指南里面会包含着怎么启动项目,以及该怎么参与贡献。这些都是开源项目理应有的。如果没有的话,要么是作者懒得加,觉得没啥必要。

image.png

实操

  1. Fork,点这个按钮,一般来说会直接Fork

image.png 完成之后出现下图

image.png

获取repo链接

image.png 拉取代码

image.png

给项目安装依赖,但是,安装依赖前检查自己电脑上的环境与贡献指南上的要求,vue devui 就要求是 pnpm 6.x,node 版本还没写,但是最好不要太低

这里又会有一个小知识,怎么安装特定的包版本 npm -g install pnpm@6

image.png 确保环境没问题之后安装依赖 pnpm i。有同学可能在这个过程空看到很多WARN,没事的,不要慌,WARN是可以允许的,不是ERROR就行。这样就是完成依赖了

image.png

image.png

运行项目,pnpm dev

image.png

可能会存在一些问题,加载不出来页面(可以提PR修复)。

image.png 没关系,刷新一下,页面就出来了

image.png

到此,项目就已经启动起来了

怎么贡献

首先阅读贡献指南,开源项目的贡献不仅仅说是只有代码提交反馈Bug文档修正解答问题等等都是为项目做了贡献。 那么怎么去贡献代码呢?看贡献指南,上面会写了贡献的一些流程,该怎么操作。每个项目的流程、规范或者说规则都是不一样的,这里就不抄一遍了。 下面来说说分享一下怎样阅读源码?

如果你不是小白,可以右上角了🤪

首先,一个项目里面是包含了非常多的东西,会对一些其他的库进行依赖,比如这里的包管理器是pnpm,其中用到了pnpm workspace做为monorepo的管理工具。这里涉及到了什么是pnpm、pnpm workspace是啥,monorepo又是啥。

其实参与开源项目,或者说阅读他人项目为的是啥?还不是补充自己的知识吗?所以不要着急,先去把前驱的相关知识了解一下,方便你更好的阅读。哪些是需要了解的知识?没人会直接告诉你的,就看着文档,哪里不会搜哪里😝。

起码你得先了解到vue devui的源码在哪里吧?不然怎么编码。然后就是入口的研究 pnpm dev 干了啥,哦,它执行了pnpm --filter vue-devui dev,这又是啥,进去了 vue-devui 子包里面执行 dev命令,跟着进去看看pnpm generate:theme && vitepress dev docs 生成了一个主题跟启动 vitepress,generate:theme执行了一个js文件node ./devui-cli/index.js generate:theme,好了,这里就不继续扒下去了。

找到组件的源码,随便改点东西,刷新页面等待结果(改错了就回退,github上还有备份呢) 根据流程贡献指南的流程提交Pull Request。Done.

写在最后

其实怎么去看东西,做东西,参与进去真的不难,很多东西文档上面都会给你标注好了,不要一下子就去问。说句开玩笑的话:百度一分钟,群里吹比两小时。

我是TinsFox,谢谢阅读!