理解 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 的生命週期，除了基本的配置之外沒法定製和修改你的項目，那將是很是死板、糟糕的開發體驗。