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

facebook/react

菜单

构建与发布流程

相关源文件

本文档概述了 React 的构建和发布流程的架构和工作流程。它解释了代码库如何构建成不同的包格式、经过测试以及发布到各种分发渠道。

概述

React 的构建系统使用 Rollup 为各种环境和平台创建优化的包。该系统支持多种包类型（开发、生产、性能分析）、模块格式（CommonJS、ESM）和目标环境（Node.js、浏览器、React Native）。

构建过程为三个不同的发布渠道生成制品：

  • 稳定版 - 标准发布，具有语义化版本控制（例如 19.1.0）
  • Canary 版 - 预发布版本，更新更频繁
  • 实验版 - 最前沿的功能，可能会发生变化

来源：scripts/rollup/build.js1-130 scripts/rollup/bundles.js10-54 package.json120-153

构建配置

捆绑包类型

构建系统支持多种包类型，每种包类型都针对特定的环境和用例：

捆绑包类型描述目标环境
NODE_ES2015适用于 Node.js 的 ES2015 模块Node.js
ESM_DEVES 模块（开发版）现代浏览器
ESM_PRODES 模块（生产版）现代浏览器
NODE_DEVCommonJS（开发版）Node.js
NODE_PRODCommonJS（生产版）Node.js
NODE_PROFILING带有性能分析的 CommonJSNode.js
BUN_DEVBun 运行时（开发版）Bun
BUN_PRODBun 运行时（生产版）Bun
FB_WWW_DEVFacebook WWW（开发版）Facebook 内部
FB_WWW_PRODFacebook WWW（生产版）Facebook 内部
RN_OSS_DEVReact Native OSS（开发版）React Native
RN_OSS_PRODReact Native OSS（生产版）React Native
BROWSER_SCRIPT直接浏览器脚本浏览器

来源：scripts/rollup/bundles.js10-54 scripts/rollup/build.js49-70

模块类型

React 的代码库组织成不同的模块类型，服务于特定目的：

来源：scripts/rollup/bundles.js56-67 scripts/rollup/forks.js17-18

软件包结构

每个 React 包都遵循一致的输出结构，旨在支持多种环境：

来源：packages/react-dom/package.json25-49 packages/react/package.json11-22 scripts/rollup/packaging.js41-115

构建流程

构建管道

主构建过程由构建脚本编排，该脚本执行以下步骤：

  1. 根据命令行参数确定要构建的包
  2. 对于每个包：
    • 解析适当的入口点，考虑特定于环境的分支
    • 使用适当的插件（Babel、TypeScript、Closure Compiler）配置 Rollup
    • 对代码应用转换（功能标志、错误代码）
    • 打包代码并应用优化
    • 添加许可证标头和其他元数据
    • 将包输出到正确的位置

来源：scripts/rollup/build.js633-743 scripts/rollup/build.js354-537

发布渠道

React 维护多个发布渠道，以支持不同级别的稳定性和实验性：

来源：scripts/rollup/build-all-release-channels.js44-146 ReactVersions.js21-64 scripts/rollup/build-all-release-channels.js169-257

功能标志和分支

React 使用功能标志和模块分支来支持不同的环境和实验性功能。

来源：scripts/rollup/forks.js134-191 scripts/rollup/forks.js242-274 scripts/rollup/build.js432-437

持续集成和发布流程

CI/CD 工作流

React 使用 GitHub Actions 进行持续集成和部署。

来源：.github/workflows/runtime_build_and_test.yml1-66 .github/workflows/runtime_commit_artifacts.yml1-66 .github/workflows/runtime_prereleases.yml1-66

构建矩阵

CI 在各种配置中构建和测试 React。

发布渠道环境变体持久模式
stabledevelopmentfalsefalse
stableproductionfalsefalse
experimentaldevelopmentfalsefalse
experimentalproductionfalsefalse
www-classicdevelopmentfalsefalse
www-classicproductionfalsefalse
www-classicdevelopmenttruefalse
www-classicproductiontruefalse
www-moderndevelopmentfalsefalse
www-modernproductionfalsefalse
www-moderndevelopmenttruefalse
www-modernproductiontruefalse
xplatdevelopmentfalsefalse
xplatdevelopmenttruefalse
xplatproductionfalsefalse
xplatproductiontruefalse
stabledevelopmentfalsetrue
experimentaldevelopmentfalsetrue

来源：.github/workflows/runtime_build_and_test.yml222-248

发布工作流

版本管理

React 版本管理集中在 ReactVersions.js 中。

来源：ReactVersions.js21-64 packages/shared/ReactVersion.js1-16

预发布发布

预发布版本会自动从主分支发布。

  1. GitHub 工作流在主分支构建成功后触发。
  2. 构建产物从上一个工作流运行中下载。
  3. 对于 Canary 版本：
    • 包将发布，带有 -canary-[commit_hash]-[date] 后缀。
    • 通过 @next 标签发布到 npm。
  4. 对于实验版本：
    • 包将发布，版本号为 0.0.0-experimental-[commit_hash]-[date]。
    • 通过 @experimental 标签发布到 npm。

来源： .github/workflows/runtime_prereleases.yml1-66 scripts/release/utils.js50-72

官方发布

官方发布遵循手动流程

  1. 更新 ReactVersions.js 中的版本号
  2. 创建发布分支
  3. 为稳定发布渠道构建包
  4. 使用 @latest 标签将包发布到 npm
  5. 在 Git 中创建发布标签

来源： ReactVersions.js21-64 .github/workflows/runtime_releases_from_npm_manual.yml1-20

内部构建分发

React 还为内部 Meta 平台生成构建

  1. Facebook WWW (网页)

    • 构建提交到 builds/facebook-www 分支
    • 包含经典和现代构建
    • 被 Facebook 的 Web 基础设施使用

  2. Facebook React Native

    • 构建提交到 builds/facebook-fbsource 分支
    • 包含 React Native 特定的实现
    • 被 Facebook 的原生移动应用使用

来源： .github/workflows/runtime_commit_artifacts.yml66-76 .github/workflows/runtime_commit_artifacts.yml125-172

捆绑包大小监控

构建过程包括监控包大小的工具

  1. 每次构建都会记录生成包的大小
  2. 大小数据用于在 PR 中生成报告
  3. 关键包大小的增加会触发警告

这有助于通过防止意外的大小回归来维持性能。

来源： scripts/rollup/stats.js1-16 dangerfile.js41-52 dangerfile.js85-101