Gatsby 项目结构

在 Gatsby 项目中，您可能会看到以下部分或全部文件夹和文件

文件夹

• /.cache 自动生成。 此文件夹是 Gatsby 自动创建的内部缓存。此文件夹中的文件不应被修改。如果尚未添加，应将其添加到 .gitignore 文件中。

• /plugins 此文件夹用于存放任何未作为 npm 包发布的项目特定（“本地”）插件。有关更多详细信息，请查看 插件文档。

• /public 自动生成。 构建过程的输出将显示在此文件夹中。如果尚未添加，应将其添加到 .gitignore 文件中。

• /src 此目录将包含与您在网站前端（您在浏览器中看到的内容）相关的所有代码，例如网站标题或页面模板。“src”是“源代码”的约定。

  • /api `src/api` 下的 JavaScript 和 TypeScript 文件会自动成为函数，其路径基于其文件名。有关更多详细信息，请查看 函数指南。
  • /pages `src/pages` 下的组件会自动成为页面，其路径基于其文件名。
  • /templates 包含用于以编程方式创建页面的模板。有关更多详细信息，请查看 模板文档。
  • html.js 用于自定义默认 .cache/default_html.js。有关更多详细信息，请查看 自定义 HTML 文档。

• /static 如果您将文件放入 `static` 文件夹，它将不会被 webpack 处理。相反，它将被原封不动地复制到 `public` 文件夹中。有关更多详细信息，请查看 资源文档。

文件

您也可以用 TypeScript 编写所有这些文件，有关更多详细信息，请参阅 TypeScript 和 Gatsby。

• gatsby-browser.js：Gatsby 在此文件中查找任何 Gatsby 浏览器 API 的使用（如果有）。这些 API 允许自定义/扩展影响浏览器的默认 Gatsby 设置。

• gatsby-config.js：这是 Gatsby 网站的主要配置文件。您可以在此处指定有关您网站的信息（元数据），例如网站标题和描述，您想包含的 Gatsby 插件等。有关更多详细信息，请查看 配置文件文档。

• gatsby-node.js：Gatsby 在此文件中查找任何 Gatsby 节点 API 的使用（如果有）。这些 API 允许自定义/扩展影响网站构建过程各个方面的默认 Gatsby 设置。

• gatsby-ssr.js：Gatsby 在此文件中查找任何 Gatsby 服务器端渲染 API 的使用（如果有）。这些 API 允许自定义影响服务器端渲染的默认 Gatsby 设置。

其他

上面描述的文件/文件夹结构反映了 Gatsby 特有的文件和文件夹。由于 Gatsby 网站也是 React 应用，因此通常会使用标准的 React 代码组织模式，例如在 `/src` 内部使用 `/components` 和 `/utils` 等文件夹。有关典型 React 应用文件夹结构的更多信息，请参阅 React 文档。