本文档提供了 Gatsby 仓库结构的概览,解释了代码库是如何组织成一个包含多个包和启动器模板的单体仓库的。有关核心系统具体实现的详细信息,请参阅 核心概念。
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 包是核心框架包,它包含
gatsby-cli 包提供了命令行工具,用于
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 占位符 |
| 插件 | 描述 |
|---|---|
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/ 目录包含作为新 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 都遵循相似的结构
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)包含:
该存储库拥有标准化的开发、测试和发布工作流
| 脚本 | 描述 |
|---|---|
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 之间的清晰分离实现了模块化和可扩展性,同时保持了一致的开发体验。
理解这种结构对于以下方面很重要: