理解 Gatsby 的生命周期

Dennis Brotzky 原作,New Frontend 翻译,LeanCloud 经授权转载。

Narative 一开始就是 Gatsby 粉,我们用它为自己和客户搭建灵活、高性能的产品。鉴于社区对 Gatsby 的兴趣越来越浓,我们想写些东西,希望有助于大家掌握这个不可思议的强大工具。

这篇文章将解释 Gatsby 的生命周期,包括 Gatsby 的特定文件的用途。

我之前学习 Gatsby 的时候面临的一项挑战是理解 Gatsby 的生命周期。我在学习 React 的时候接触到了组件生命周期的概念,但当我开始学习 Gatsby 后又感茫然。我记得当时看了很多代码样例仓库,每个项目中都看到一些 Gatsby 的特定文件,于是就有了这些疑问:「这些文件是做什么的?默认的初始化工具为什么要生成 gatsby-node.js、gatsby-browser.js、gatsby-ssr.js?我可以删掉这些文件吗?」

Gatsby 的工作机制

想要理解这些文件的用途,首先需要理解 Gatsby 的工作机制。Gatsby 是一个静态站点生成器,从你提供的来源拉取数据,据此生成网站或应用。

开发 Gatsby 项目需要安装 Node,以便运行相应的引导和构建过程。Gatsby 使用 Webpack 构建项目,然后运行开发服务。

第一步
每次运行 gatsby develop 都会有一个引导过程,引导阶段会触发大约 20 个事件,包括校验 gatsby-config.js,构建站点数据图式和页面。例如,Gatsby 会在引导阶段创建页面。如果想要深入了解引导阶段的 20 个事件,Swyx 分享了一个非常棒的 Gist 列举其中细节。

第二步
构建过程很像引导过程,区别在于会运行用于生产环境的优化,以及输出可供部署的静态文件。可以类比 React 应用的生产模式和开发模式。

第三步
最后,部署生成文件之后,Gatsby 的生命周期延续到浏览器。Gatsby 生成的静态站点在初次加载后会转变为 web 应用。

敲黑板,划重点,Gatsby 的生命周期分为三个主要阶段:

  1. 引导
  2. 构建
  3. 浏览器

这三个阶段构成了 Gatsby 的生命周期。

运行 gatsby develop 时能看到部分生命周期

运行 gatsby develop 的截屏

如果你熟悉 React 及其组件的生命周期,那么 Gatsby 的生命周期几乎算是同一概念。像 React 生命周期一样,Gatsby 提供了供开发者使用的钩子。gatsby-node.js、gatsby-browser.js、gatsby-ssr.js 之类的 Gatsby 特定文件就涉及到这些生命周期钩子。

Gatsby 特定文件的用途

gatsby-config.js

所有的站点配置项都放在这里,包括插件、元数据、polyfill。这个文件是你应用的蓝图,展示了 Gatsby 的一大亮点——强大的插件系统。运行 gatsby develop 和 gatsby build 时首先读取和校验的文件就是 gatsby-config.js。

源码插件、图像插件、离线支持、样式选项、站点元数据等配置都在 gatsby-config.js 中。

gatsby-node.js

Gatsby 在开发和构建的过程中会运行 Node 进程,使用 Webpack 打包文件,并运行一个支持热重载的服务。Gatsby 使用 Node 加载插件、检查缓存、引导站点、创建数据图式和页面、处理一些配置和数据管理任务。

引导和构建阶段的事件都包括在 gatsby-node.js 中。也就是说,如果你想要基于某个来源插件的数据动态创建页面,或者修改 Gatsby 的 Webpack 和 Babel 配置,那么就应该编辑 gatsby-node.js。

例如,如果你希望手动移动某些文件,例如 Netlify _redirects 文件,那么你可以修改 gatsby-node.js 文件的 onPostBuild 部分。

就我个人的经验而来,我的大部分时间都花在 gatsby-node.js 上,处理数据或是创建页面。这个文件很快会变成你整个网站的关键所在。

gatsby-node.js 钩子的例子:

  • createPages
  • onCreateBabelConfig
  • onCreateWebpackConfig
  • onPostBuild

gatsby-ssr.js

说到服务端渲染,你可能会设想这样一个场景:服务器根据收到的请求动态创建页面并发给客户端。Gatsby 不这么做,但它确实属于服务端渲染——它会在构建时生成所有页面。

gatsby-ssr.js 负责处理生命周期这一阶段的钩子。就我的经验而言,大部分情况下包括在生成的输出中插入 CSS、HTML、Redux 状态信息。例如,如果你想要插入第三方的 JavaScript(比如活动追踪代码或是用于统计请求的像素),那么可以在 gatsby-ssr.js 的 onRenderBody 钩子中加入。

gatsby-ssr.js 钩子的例子:

  • onPreRenderHTML
  • onRenderBody
  • replaceRenderer

gatsby-browser.js

Gatsby 生成的静态站点在初次加载后会转变为动态应用,也就是说你可以基于静态站点搭建 web 应用。gatsby-browser.js 提供了方便的钩子,供你处理应用加载、路由更新、service worker 更新、滚动定位等需求。

在静态站点加载之后的一切都可以通过 gatsby-browser.js 的钩子处理。就我创建的应用而言,gatsby-browser.js 主要用于记录路由历史、滚动定位、发送统计事件。

gatsby-browser.js 钩子的例子:

  • onClientEntry
  • onRouteUpdate
  • onServiceWorkerInstalled
  • registerServiceWorker
  • shouldUpdateScroll

结语

Gatsby 的核心是 React,提供了类似的 API 模式——生命周期。生命周期让开发者可以通过特定的钩子访问站点处理的关键时刻。例如,添加统计功能可以通过浏览器阶段的 onClientEntry 钩子完成。Gatsby 保留了特定的文件名,作为开发者访问生命周期每个阶段的入口:gatsby-node.js、gatsby-ssr.js、gatsby-browser.js。

如果不利用 Gatsby 的生命周期,除了基本的配置以外无法定制和修改你的项目,那将是非常死板、糟糕的开发体验。

阅读 943

推荐阅读
LeanCloud 官方专栏
用户专栏

LeanCloud(原 AVOS Cloud) 是针对移动应用的一站式云端服务,专注于为应用开发者提供工具和平台。提供...

5002 人关注
102 篇文章
专栏主页