为任何开源 JavaScript 项目做出贡献的指南💛

最近有人问我，当代码库很大、问题已经被解决或者第一个问题看起来很难解决时，他们如何为开源项目做出贡献。

最初，我也遇到过这些问题，在本文中，我将讨论如何探索存储库，找到正确的问题来解决，并且我还将尝试回答我刚才提到的一些问题。🐨🌻

出发啦🎉

目录

• 找到正确的存储库
• 找到正确的问题
  • 问：每个问题都有答案，我们如何找到一个？
  • 问：确实发现了问题，但似乎很难
• 探索代码
  • 问：代码库太庞大了！我们如何才能理解整个代码库？
  • 在代码中查找正确的文件
  • 需要额外知识的项目
• 一些有用的链接

1. 找到正确的仓库

为您使用的东西做出贡献，或者找到让您兴奋的东西并在尝试做出贡献之前先玩一玩。

我强烈建议您在为该工具/库/网站做贡献之前先试用一下。这样可以让您很好地了解它的功能和工作原理。

如果你对提交 PR 的流程感到不适应，可以先向First Contributions Repository贡献。你需要把你的名字添加到列表中，然后提交 PR！他们有一份很棒的指南来解释这个过程。

2. 找到正确的问题

在问题版块，你会发现带有good first issue标签的问题。虽然标签并非必需，但这通常是维护人员发出的信号，表示“嘿，这些问题相对容易解决”。如果你发现其他更让你感兴趣的问题，那就去解决吧！

我建议尝试查找与文档相关的问题，因为这类问题更容易上手。如果您找不到这类问题，也没关系，您可以随意选择。等您熟悉了代码库之后，就可以继续选择更具挑战性的问题了。

在我们继续之前，我知道你可能已经听过很多次了，我可能是第 1000 个这么说的人，但是

🎉每一份贡献都至关重要🎉

即使文档中的拼写修复也会对维护人员产生巨大的帮助，您应该为这样的贡献感到自豪！

以下是我感到自豪的一件事：

DEV.to 的编辑指南中有一个多余的括号，我将其删除了 :D

PR：https ://github.com/thepracticaldev/dev.to/pull/4500

问：每个问题都有答案，我们如何找到一个？

在热门的开源项目中，你会发现大多数优秀的“首期问题”都已被采纳，并且已经有人在处理它们。在这种情况下，你可以加入他们的聊天频道。项目会使用 Slack、Discord、Spectrum、GitHub Discussions 或其他聊天频道来寻求帮助。在这些聊天频道中，你可以留言寻求问题查找方面的帮助。维护人员会帮助你找到问题。

问：确实发现了问题，但似乎很难……

这是非常正常的，即使您有丰富的贡献经验，当您尝试为一个新组织做出贡献时，您很可能乍一看就会发现问题很难。

您随时可以在问题评论中寻求帮助。维护人员会帮助您调试问题，并指出需要修改的正确文件。不过，在寻求帮助之前，请先自行探索一下。

3. 探索代码🤠

在开始探索代码之前，请务必阅读仓库中的 CONTRIBUTING.md 文件（如果某个仓库没有 CONTRIBUTING.md 文件，那就太好了🎉 这时您可以提交一个 Pull 请求来添加 CONTRIBUTING.md 文件）。该文件通常包含本地设置指南以及其他您可能需要的贡献信息。您可以先在本地设置，然后再进行探索，也可以先在 GitHub 上探索，然后再进行本地设置以进行更改。

我更喜欢在本地探索，因为你可以玩耍并执行代码。

太棒了，现在你已经
🗸决定了你想要解决的问题
🗸阅读 CONTRIBUTING.md

现在我们来探索一下耶！！！哦..但是等等..

问：代码库太庞大了！我们如何才能理解整个代码库？

有趣的是，你不必理解整个代码🎉

您只需关心与您选择的问题相关的代码。

3a. 在代码中找到正确的文件。

提示：在 VSCode 中，您可以按 CTRL + SHIFT + F 在完整项目中查找某些内容，或者在 GitHub 上，您可以使用搜索栏查找相关代码。

在网站/前端存储库中

如果您要贡献的项目是网站，您可以搜索界面上显示的关键词。例如，如果您想为 DEV 的导航栏做贡献，您可以搜索“撰写文章”按钮。

如果它不是一个网站，您可以按照从入口文件开始的导入来开始查找相关功能。

在库、NPM 包和 CLI 中

在 NPM 包中，您会发现具有main属性的 package.json，该属性的值main是您导入/需要该 NPM 包时导入的文件。

如果您正在为 CLI 做出贡献，您会bin在 package.json 中找到指向运行 CLI 命令时执行的文件。

单一存储库

一些项目，例如 React、Gatsby、Next，都遵循 Mono 仓库。它们将所有相关项目都放在同一个仓库中。在这些项目中，你很可能会packages在根目录下找到一个名为 的文件夹，在里面packages你会找到一个名为 npm 库的文件夹（例如packages/react、packages/next、packages/gatsby）。

如果您看到这些包中的 package.json 文件，您将找到main指向导出我们通常从这些库中导入的函数的文件的键。

例子

如果您使用过 React，我们通常会导入useEffect其他类似的钩子，对吗？

import { useEffect } from 'react';

这意味着 react 包必须导出该useEffect函数🤔

让我们来一探究竟！

正如我之前提到的，mono-repos 通常有一个packages文件夹，里面有一个以 NPM 库名称命名的包（在本例中为“react”）。那就让我们开始吧packages/react/🚀

现在我们要找到入口文件，所以我们将查看package.json文件。

React 的 Package.json有{'main': 'index.js'}，这意味着我们从react包中导入的所有内容都必须从中导出index.js。让我们看看它是否有useEffect功能！

哇喔🎉 是的！

现在，您可以按照该函数的导入来找到处理 useEffect 逻辑的文件。

3b. 需要额外知识的项目

如果你一直在构建网站和 Web 应用，然后查看 React 的源代码，你会发现代码看起来会有所不同。有些代码库需要你了解一些其他主题，而这些主题你在其他情况下可能不会遇到。

一些项目建立在抽象语法树之上，而一些存储库使用不同的语言/库。

乍一看，你可能会觉得这段代码很难，但更重要的是，它与众不同。它与我们 JavaScript 开发人员通常遇到的代码不同。

您可以花一些时间研究代码库，如果遇到困难，可以随时向维护人员提问。

一些有用的链接

初始贡献的 GitHub 存储库

• 首次贡献 GitHub 存储库- 这对于实际练习发送 Pull 请求非常有用（有趣的事实：我也是从这里开始的 :D）
• Knaxus GitHub 组织- 目标与首次贡献类似，但它们会让您为实际的编码项目做出贡献。

学习 git 和 GitHub 的资源

• YouTube 视频，“初学者在 GitHub 上为开源做出贡献”，作者：Kent C. Dodds https://youtu.be/k6KcaMffxac
• YouTube 视频，“git_basics - Git 和 GitHub 所需的基础知识！”作者：Harsh Kapadia https://youtu.be/HF12-91iazM
• 通过 GitHub 学习 git 的资源https://try.github.io/

感谢您阅读本文🎉如果您对 git、GitHub 或贡献有任何疑问，您可以在评论中提问或通过我的Twitter DM @saurabhcodes与我联系。

🌻🌻🌻🌻