Monorepo 结构

相关源文件

• .flowconfig
• flow-typed/npm/shelljs_v0.x.x.js
• package.json
• packages/assets/package.json
• packages/babel-plugin-codegen/package.json
• packages/community-cli-plugin/package.json
• packages/eslint-config-react-native/package.json
• packages/eslint-plugin-react-native/package.json
• packages/eslint-plugin-specs/package.json
• packages/metro-config/package.json
• packages/normalize-color/package.json
• packages/polyfills/package.json
• packages/react-native-babel-preset/package.json
• packages/react-native-babel-transformer/package.json
• packages/react-native-babel-transformer/src/__tests__/transform-test.js
• packages/react-native-babel-transformer/src/index.js
• packages/react-native-bots/dangerfile.js
• packages/react-native-bots/package.json
• packages/react-native-codegen-typescript-test/package.json
• packages/react-native-codegen/package.json
• packages/react-native/Libraries/AppState/AppState.js
• packages/react-native/Libraries/EventEmitter/__mocks__/NativeEventEmitter.js
• packages/react-native/Libraries/vendor/emitter/EventEmitter.js
• packages/react-native/package.json
• packages/rn-tester/js/examples/Experimental/Compatibility/ManyPointersPropertiesExample.js
• packages/rn-tester/package.json
• packages/virtualized-lists/package.json
• scripts/build-types/transforms/__tests__/replaceDefaultExportName-test.js
• yarn.lock

本文档概述了 React Native 的 monorepo 结构，解释了代码库是如何组织的、包之间的关系以及构建系统。有关构建流水线的具体信息，请参阅 构建流水线。

概述

React Native 采用 monorepo 架构来管理其代码库，这意味着多个包托管在单个存储库中。这种方法允许跨所有包进行协调的更改，并简化了依赖管理。monorepo 包含核心 React Native 框架、支持工具和补充包。

来源：package.json40-43 packages/react-native/package.json1-10 packages/community-cli-plugin/package.json1-15 packages/react-native-codegen/package.json1-10 packages/metro-config/package.json1-10 packages/virtualized-lists/package.json1-14

工作区配置

Monorepo 通过 Yarn workspaces 配置，从而能够高效地跨包管理依赖。workspace 配置在根目录的 package.json 中定义。

workspaces 字段定义了应该包含在 monorepo 中的目录，其中包含 packages/* 和 tools/*，并显式排除了 packages/helloworld。

来源：package.json40-43

核心包结构

核心 React Native 包位于 packages/react-native/。这是发布到 npm 的 "react-native" 包。它包含了框架的核心功能，包括：

• JavaScript 模块和组件（Libraries/）
• Android 实现（ReactAndroid/）
• iOS 实现（React/，ReactApple/）
• 共享 C++ 实现（ReactCommon/）
• Flow 类型（flow/，types/）
• 新项目的模板（template/）

此结构在其 package.json 的 files 数组中定义。

来源：packages/react-native/package.json34-93

支持性包

Monorepo 包含许多构成 React Native 生态系统的支持性包

包	描述	路径
@react-native/codegen	React Native 的代码生成工具	packages/react-native-codegen/
@react-native/community-cli-plugin	React Native 的核心 CLI 命令	packages/community-cli-plugin/
@react-native/metro-babel-transformer	React Native 应用程序的 Babel transformer	packages/react-native-babel-transformer/
@react-native/metro-config	React Native 的 Metro 配置	packages/metro-config/
@react-native/babel-preset	React Native 应用程序的 Babel preset	packages/react-native-babel-preset/
@react-native/assets-registry	资源支持代码	packages/assets/
@react-native/normalize-colors	颜色标准化实用工具	packages/normalize-color/
@react-native/virtualized-lists	虚拟列表组件	packages/virtualized-lists/
@react-native/js-polyfills	JavaScript polyfills	packages/polyfills/
@react-native/eslint-config	ESLint 配置	packages/eslint-config-react-native/
@react-native/eslint-plugin	ESLint 插件	packages/eslint-plugin-react-native/
@react-native/eslint-plugin-specs	Native Modules and Components 的 ESLint 规则	packages/eslint-plugin-specs/
@react-native/babel-plugin-codegen	代码生成的 Babel 插件	packages/babel-plugin-codegen/

来源：packages/react-native-codegen/package.json1-19 packages/community-cli-plugin/package.json1-15 packages/react-native-babel-transformer/package.json1-15 packages/metro-config/package.json1-15 packages/react-native-babel-preset/package.json1-15 packages/assets/package.json1-19 packages/normalize-color/package.json1-19 packages/virtualized-lists/package.json1-21 packages/polyfills/package.json1-23 packages/eslint-config-react-native/package.json1-15 packages/eslint-plugin-react-native/package.json1-17 packages/eslint-plugin-specs/package.json1-19 packages/babel-plugin-codegen/package.json1-19

内部依赖

Monorepo 中的包相互依赖。这通过版本控制系统和 monorepo 的构建工具来管理。

每个包都有一个 package.json 文件，其中定义了它的依赖项，这些依赖项可以包括 monorepo 中的其他包。例如，核心 react-native 包依赖于几个内部包，如 @react-native/codegen 和 @react-native/assets-registry。

来源： packages/react-native/package.json108-144 packages/community-cli-plugin/package.json24-33 packages/react-native-codegen/package.json31-37 packages/metro-config/package.json28-33 packages/react-native-babel-transformer/package.json17-22 packages/react-native-babel-preset/package.json16-62 packages/babel-plugin-codegen/package.json27-30

版本管理

monorepo 中的所有包都是一起版本化的。核心 react-native 包在开发过程中使用占位符版本 1000.0.0，而支持包使用 0.80.0-main 版本格式。

版本号在发布过程中更新，发布过程由存储库中的脚本管理。

来源： package.json4 packages/react-native/package.json3 packages/community-cli-plugin/package.json3 packages/react-native-codegen/package.json3

构建系统

monorepo 使用协调的构建系统，该系统负责为不同平台构建所有包。

构建系统在根目录的 package.json 文件中定义，其中包含构建整个存储库的脚本。

来源： package.json7-38

测试基础设施

monorepo 包含全面的测试基础设施，根目录 package.json 文件中定义了多个测试脚本。

每个包也可能包含其自己的测试配置和脚本。

来源： package.json28-37

Flow 配置

React Native 使用 Flow 进行静态类型检查，根目录下的 .flowconfig 文件定义了整个 monorepo 的配置。

Flow 配置指定了哪些文件应包含或排除在类型检查之外，以及如何处理模块解析。

来源： .flowconfig1-101

CI/CD 系统

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

CI/CD 系统负责测试更改、构建包和发布版本。

来源： package.json36 packages/react-native-bots/dangerfile.js1-101 packages/react-native-bots/package.json1-22

开发工具

monorepo 包含多个开发工具，以协助编码、格式化和 linting。

这些工具有助于在整个 monorepo 中保持代码质量和一致性。

来源： package.json7-38

结论

React Native monorepo 是一个复杂且结构良好的存储库，其中包含核心 React Native 框架及其支持包。这种架构能够协调 React Native 生态系统的所有部分的开发和版本化。理解 monorepo 的结构对于贡献 React Native 和开发自定义集成至关重要。