菜单

存储库结构

相关源文件

本文档提供了 Gatsby 仓库结构的概览,解释了代码库是如何组织成一个包含多个包和启动器模板的单体仓库的。有关核心系统具体实现的详细信息,请参阅 核心概念

Monorepo 架构

Gatsby 使用 Yarn workspaces 和 Lerna 进行管理的单体仓库架构。这种方法允许同时开发和测试多个包,同时保持独立的版本控制和发布周期。

仓库布局图

来源: package.json126-130 packages/gatsby/package.json packages/gatsby-cli/package.json

根目录下的 package.json 定义了工作区的配置

此配置告知 Yarn 将 packages/ 目录中所有包的依赖项作为一个整体进行管理。

包组织

Gatsby monorepo 中的包根据其功能分为几个类别

包类别图

来源: packages/gatsby/package.json packages/gatsby-cli/package.json packages/gatsby-source-contentful/package.json packages/gatsby-source-wordpress/package.json packages/gatsby-source-shopify/package.json packages/gatsby-plugin-sharp/package.json packages/gatsby-plugin-image/package.json packages/gatsby-telemetry/package.json packages/gatsby-core-utils/package.json packages/gatsby-plugin-utils/package.json

核心软件包

描述主要文件
gatsby核心框架包cli.js, index.js, graphql.js
gatsby-cli命令行界面cli.js

gatsby 包是核心框架包,它包含

  • 核心构建系统
  • Redux 状态管理
  • GraphQL 数据层
  • 插件系统
  • 开发服务器

gatsby-cli 包提供了命令行工具,用于

  • 创建新的 Gatsby 网站
  • 运行开发服务器
  • 构建生产站点
  • 处理错误和日志记录

源插件

Source 插件从外部源获取数据并在 Gatsby 的数据层中创建节点

插件描述
gatsby-source-filesystem从本地文件源获取数据
gatsby-source-contentful从 Contentful CMS 源获取数据
gatsby-source-wordpress从 WordPress 源获取数据
gatsby-source-drupal从 Drupal 源获取数据
gatsby-source-shopify从 Shopify 源获取数据

转换器插件

Transformer 插件处理由 source 插件获取的数据

插件描述
gatsby-transformer-sharp转换图像以优化交付
gatsby-transformer-sqip为图像生成 SVG 占位符

UI/显示插件

插件描述
gatsby-plugin-image用于优化图像的 React 组件
gatsby-plugin-sharp低级图像处理实用程序

实用程序包

描述
gatsby-core-utils跨包使用的通用实用程序
gatsby-plugin-utils插件特有的实用程序
gatsby-telemetry遥测收集函数

包的相互依赖性

Gatsby 包具有相互依赖性,形成功能层次结构

来源: packages/gatsby/package.json12-178 packages/gatsby-cli/package.json12-52 packages/gatsby-source-contentful/package.json9-26 packages/gatsby-source-wordpress/package.json9-47 packages/gatsby-plugin-sharp/package.json9-21 packages/gatsby-plugin-image/package.json84-89

例如,在 packages/gatsby-source-contentful/package.json 中,我们看到了对其他 Gatsby 包的依赖

核心包结构

gatsby 核心包具有以下结构

packages/gatsby/
├── cache-dir/        # Client-side runtime code
├── dist/             # Compiled code
├── scripts/          # Build and utility scripts
├── src/              # Source code
│   ├── commands/     # CLI commands implementation
│   ├── schema/       # GraphQL schema generation
│   ├── internal-plugins/ # Built-in plugins
│   ├── redux/        # Redux state management
│   ├── query/        # GraphQL query handling
│   └── utils/        # Utility functions
├── cli.js            # CLI entry point
├── graphql.js        # GraphQL utilities
├── reporter.js       # Logging utilities
└── package.json      # Package definition

来源: packages/gatsby/package.json219-237

已发布 gatsby 包中包含的文件在 files 字段中定义

Starters 目录

starters/ 目录包含作为新 Gatsby 网站起点的模板项目

来源:starters/blog/package.json starters/default/package.json starters/hello-world/package.json starters/minimal/package.json starters/gatsby-starter-minimal-ts/package.json starters/gatsby-starter-wordpress-blog/package.json

Starters 的通用结构

所有 Starters 都遵循相似的结构

starter-name/
├── src/                # Source code
│   ├── components/     # React components
│   ├── pages/          # Page components
│   ├── templates/      # Page templates (in some starters)
│   └── styles/         # CSS or styling files
├── static/             # Static assets (in some starters)
├── gatsby-config.js    # Gatsby configuration
├── gatsby-node.js      # Gatsby Node APIs (in some starters)
├── package.json        # Dependencies and scripts
└── README.md           # Project documentation

每个 Starter 都有自己的 package.json 文件,其中包含必要的依赖项和脚本。例如,minimal Starter(starters/minimal/package.json)包含:

构建和开发工作流

该存储库拥有标准化的开发、测试和发布工作流

开发流程

来源:package.json89-126

关键脚本

脚本描述
bootstrap设置所有包的依赖项
watch监视更改并重新构建包
test运行测试套件
publish-next发布预发布版本
publish-release发布稳定版本

bootstrap 过程定义在 package.json 文件中

包构建过程

单个包有自己的构建脚本。例如,gatsby 包在其 packages/gatsby/package.json 文件中定义了这些脚本

来源:packages/gatsby/package.json263-277

环境要求

该存储库在根目录的 package.json 文件中指定了 Node.js 版本要求

Individual packages also specify their engine requirements. For example, in packages/gatsby/package.json

来源:package.json71-75 packages/gatsby/package.json216-218

结论

Gatsby 存储库使用 monorepo(单一仓库)结构来管理多个包,从而更轻松地开发和维护 Gatsby 组件生态系统。核心功能、插件和 starters 之间的清晰分离实现了模块化和可扩展性,同时保持了一致的开发体验。

理解这种结构对于以下方面很重要:

  • 为 Gatsby 核心或插件做贡献
  • 创建自定义插件
  • 理解包之间的关系
  • 设置正确的开发环境

有关这些包如何实现 Gatsby 核心功能的信息,请参阅 核心概念插件生态系统 部分。