在 Devin 中试用 DeepWiki 处理私有仓库
DeepWiki

remix-run/react-router

菜单

贡献

相关源文件

本文档为 React Router 项目的贡献者提供了全面的信息。它涵盖了开发环境设置、编码标准、拉取请求流程以及如何有效地为 https://github.com/remix-run/react-router 项目的代码库做出贡献。

目录

存储库结构

React Router 被组织成一个包含多个软件包的 monorepo，这些软件包协同工作，为 React 应用程序提供路由功能。

来源：integration/package.json, pnpm-lock.yaml

开发环境设置

先决条件

要为 React Router 做出贡献，您需要安装以下工具

  • Node.js (v16 或更高版本)
  • PNPM (用作包管理器)
  • Git

安装

  1. 在 GitHub 上 Fork 仓库
  2. 在本地克隆你的 fork
  3. 安装依赖项

项目结构

来源：pnpm-lock.yaml

工作流

React Router 使用 PNPM workspaces 来管理 monorepo。大多数开发任务都通过 PNPM 脚本处理。

常用命令

开发工作流

  1. 为您的更改创建一个新分支
  2. 在适当的包中进行更改
  3. 添加测试以覆盖您的更改
  4. 通过运行 pnpm test 来确保所有测试都通过
  5. 使用 pnpm build 构建包，以确保所有内容都能正确编译
  6. 使用适当的提交消息提交您的更改
  7. 推送您的更改并创建拉取请求

来源：integration/package.json, pnpm-lock.yaml

代码规范

React Router 遵循特定的编码标准，以保持代码库的一致性

TypeScript

整个代码库都用 TypeScript 编写，以确保类型安全并提供更好的开发人员体验。

格式化和 Linting

  • ESLint：用于 linting JavaScript 和 TypeScript 代码
  • Prettier：用于代码格式化

该项目使用以下配置文件

  • .eslintrc.js - ESLint 配置
  • .prettierrc - Prettier 配置

代码组织

来源：pnpm-lock.yaml

测试

测试是为 React Router 做出贡献的关键部分。该项目使用多种测试方法

单元测试

单元测试使用 Jest 和 React Testing Library 编写，以确保每个组件和实用函数都能按预期工作。

集成测试

集成测试用于验证系统的不同部分是否能正确协同工作。React Router 拥有广泛的集成测试，可以模拟真实世界的使用场景。

来源：integration/package.json, pnpm-lock.yaml

运行测试

拉取请求流程

提交 PR 前

  1. 确保所有测试通过
  2. 确保您的代码遵循项目的代码风格
  3. 必要时更新文档
  4. 验证您的更改不会破坏现有功能

PR 指南

  1. 标题：使用清晰、描述性的标题来总结您的更改
  2. 描述：包含详细说明
    • 更改了什么
    • 为什么需要这次更改
    • 如何实现的更改
    • 任何潜在的问题或限制
  3. 相关问题：使用 GitHub issue 号（#123）引用任何相关问题

审查流程

提交 PR 后

  1. 维护者将审查您的代码
  2. 将运行自动 CI 检查，以确保测试通过并符合代码质量标准
  3. 您可能会被要求根据反馈进行更改
  4. 获得批准后，维护者将合并您的 PR

社区准则

行为准则

React Router 遵循行为准则，以确保一个受欢迎且包容的社区。所有贡献者都必须遵守。

沟通渠道

  • GitHub Issues：用于 bug 报告和功能请求
  • GitHub Discussions：用于一般性问题和讨论
  • Discord：用于与社区进行实时交流

成为贡献者

React Router 拥有一系列不断增长的贡献者，他们帮助改进了该项目。您可以在 contributors.yml 文件中找到所有贡献者。

来源：contributors.yml

管理依赖项

React Router 使用 PNPM 进行包管理。依赖项定义在 package.json 文件中，并锁定在 pnpm-lock.yaml 文件中。

添加新依赖项

添加新依赖项时

  1. 考虑依赖项是否必要
  2. 检查依赖项是否正在积极维护
  3. 评估对打包大小的影响
  4. 将依赖项添加到适当的包中

来源：pnpm-lock.yaml

版本管理和发布

React Router 使用语义化版本控制方法和 Changesets 来管理版本和生成变更日志。

创建 Changesets

当进行需要包含在下次发布中的更改时

  1. 运行 pnpm changeset 来创建一个新的 changeset
  2. 选择已修改的包
  3. 选择适当的版本更新（patch、minor、major）
  4. 编写更改描述

发布流程

发布流程由维护者处理，包括

  1. 合并累积的 changesets
  2. 准备带有版本更新的发布
  3. 将包发布到 npm
  4. 创建带有变更日志的 GitHub releases

Playground 应用程序

React Router 包含几个用于测试和开发的 Playground 应用程序

  • framework：基础框架集成
  • framework-express：Express 服务器集成
  • framework-spa：单页应用程序示例
  • middleware：中间件使用示例
  • vite-plugin-cloudflare：Cloudflare 与 Vite 集成

这些应用程序对于在真实环境中测试您的更改非常有用。

来源：pnpm-lock.yaml

结论

为 React Router 贡献力量是一种有益的方式，可以改进被数百万开发人员使用的工具。通过遵循这些指南，您可以帮助维护项目的质量和可靠性，同时增强其功能。

请记住，每一项贡献，无论是代码、文档还是 bug 报告，都对项目的成功至关重要。感谢您对为 React Router 做出贡献的兴趣！