了解 Gatsby 的生命周期

由 Mux 主办的 DEV 全球展示挑战赛：展示你的项目！

在Narative，自从我们开始帮助合作伙伴构建他们梦寐以求的产品以来，我们就一直是Gatsby 的忠实拥趸。随着我们团队的不断壮大以及 Gatsby 社区的日益壮大，我们希望能够创建更多资源，让每个人都能更轻松地掌握 Gatsby 的强大功能。

我在学习 Gatsby 时遇到的挑战之一是理解 Gatsby 的生命周期。React 让我接触到了组件生命周期的概念，但当我开始学习 Gatsby 时，我又一次感到迷茫。我记得当时浏览示例仓库时，发现每个项目中都有 Gatsby 特有的文件，我不禁自问：“这些文件是做什么用的？为什么默认的入门套件里会生成 gatsby-node.js、gatsby-browser.js 和 gatsby-ssr.js 这些文件？我真的可以删除它们吗？” 在本文中，我将解释 Gatsby 的生命周期是如何运作的，以及这些 Gatsby 特有的文件究竟有什么作用。

Gatsby是如何工作的？

要了解这些文件的用途，我们首先必须了解 Gatsby 的工作原理。Gatsby 是一个静态网站生成器，它会从你提供的数据源中提取数据，并为你生成网站/应用程序。Gatsby
需要安装 Node.js 才能运行 Bootstrap 和 Build 序列。在底层，Gatsby 使用 Webpack 来构建和启动开发服务器等等。

步骤 1

每次运行 `$ gatsby develop` 时，都会触发 Bootstrap 序列，其中包含大约 20 个事件，涵盖从验证 `gatsby-config.js` 文件到构建网站数据模式和页面等各个环节。例如，Gatsby 会在 Bootstrap 序列中创建页面。如果您想深入了解所有 20 个 Bootstrap 步骤，Swyx 分享了一个非常棒的 Gist，其中有更详细的说明。

步骤 2

构建过程与引导过程非常相似，区别在于构建过程会启用生产环境优化，并输出可直接部署的静态文件。你可以把它想象成在生产模式下构建 React 应用，而不是在开发模式下构建。

步骤 3

最后，一旦生成的文件部署完毕，Gatsby 便会在浏览器中运行。Gatsby 巧妙地生成一个静态网站，并在初始加载后将其转换为 Web 应用程序，从而将生命周期扩展到浏览器端。
需要记住的是，Gatsby 的生命周期可以概括为三个主要阶段。

1. Bootstrap
2. 建造
3. 浏览器

这三个序列构成了 Gatsby 的生命周期。

$ gatsby develop
运行 `Gatsby run` 时，可以看到部分生命周期$ gatsby develop。如果您熟悉 React 及其组件生命周期，那么 Gatsby 的生命周期概念与之几乎相同。与 React 的生命周期类似，Gatsby 也提供了一些钩子供开发者在其基础上进行构建。这些生命周期钩子可以通过 Gatsby 特有的文件（例如 `<script>`、`<script>`gatsby-node.js和gatsby-browser.js`<script> `）来访问gatsby-ssr.js。

Gatsby特有的文件是做什么用的？

gatsby-config.js

这里存放着所有网站配置，例如插件、元数据和 polyfill。这个文件是应用程序的蓝图，也是 Gatsby 插件系统真正发挥作用的地方。当你运行 `.gatsby.js` 时$ gatsby develop，$ gatsby build gatsby-config.js它是第一个被读取和验证的文件。
你大部分时间gatsby-config.js可能都会花在处理源插件、图像插件、离线支持、样式选项和网站元数据上。

gatsby-node.js

当您开发或构建网站时，Gatsby 会运行一个 Node 进程，并在底层使用 Webpack 来启动一个支持热重载的开发服务器。在 Node 进程运行期间，Gatsby 会加载插件、检查缓存、引导网站、构建数据模式、创建页面，并处理一些配置和数据管理工作。
引导和构建过程中的所有操作都在 gatsby-node.js 文件中完成。这意味着它是根据源插件的数据动态创建页面或修改 Gatsby 的 Webpack 或 Babel 配置的理想位置。 
例如，如果您想手动移动一些文件，例如 Netlify 的 _redirects 文件，那么在 gatsby-node.js 文件中的 onPostBuild 生命周期钩子函数中进行操作是一个不错的选择。

根据我的经验，我大部分时间都花在了处理数据和构建页面上gatsby-node.js。这个文件很快就会成为整个网站的管道。

钩子示例gatsby-node.js：

• 创建页面
• onCreateBabelConfig
• onCreateWebpackConfig
• onPostBuild

gatsby-ssr.js

提到服务器端渲染，你可能会想到服务器接收请求，动态构建页面并将其发送给客户端。Gatsby 并不这样做，但它确实实现了服务器端渲染——它在构建时生成所有页面。

当然，gatsby-ssr.js这允许开发者介入到这个生命周期中。根据我的经验，大多数用例都围绕着将 CSS、HTML 或 Redux 状态信息注入到生成的输出中。例如，如果您需要插入第三方脚本，例如分析跟踪或像素代码，可以在 onRenderBodygatsby-ssr.js钩子中完成。

钩子示例gatsby-ssr.js：

• onPreRenderHTML
• onRenderBody
• 替换渲染器

gatsby-browser.js

Gatsby 是一个静态网站框架，在初始加载后会加载动态应用程序，这意味着您可以在 Web 应用程序中享受到静态网站的优势。gatsby-browser.js它提供了便捷的钩子来处理应用程序加载、路由更新、Service Worker 更新、滚动定位等等。

静态网站加载完毕后发生的所有操作都可以进行挂钩gatsby-browser.js。在我开发的应用里，gatsby-browser.js它主要用于跟踪路由、滚动位置和发送分析事件。

钩子示例gatsby-browser.js：

• onClientEntry
• onRoute更新
• onServiceWorkerInstalled
• 注册ServiceWorker
• 应该更新滚动

结论

Gatsby 以 React 为核心构建，并共享一个通用的 API 模式——生命周期。该生命周期允许开发者通过特定的钩子访问网站流程中的关键时刻。例如，可以通过浏览器生命周期钩子 `onClientEntry` 添加分析功能。Gatsby 为每个生命周期预留了特定的文件名作为入口点；这些文件名分别为 `<filename>` gatsby-node.js、 `<filename> gatsby-ssr.js` 和gatsby-browser.js`<filename>`。如果没有 Gatsby 生命周期，开发者将无法在基本配置之外对项目进行自定义和修改，这将导致开发者体验僵化且糟糕。正是这种强大的功能和灵活性，帮助我们为像Hopper这样的客户构建了出色的 Web 项目！

Gatsby 是我们 Narative 工程流程中的核心工具，我们借助它帮助客户构建了他们梦寐以求的产品，以及他们尚未构想的产品。

https://narative.co