升級至 v2

在 PWA Kit v2 之前所產生的專案可以進行升級,以利用 v2 在架構和工具方面的改善。

升級並不會自動從 Retail React App 範本新增任何新的網店功能,但您可參考最新的 Retail React App 程式碼,手動新增這些功能。

我們為 PWA Kit v2 增加了許多新功能,包括:

🥳 TypeScript 支援。建置工具現在預設支援 TypeScript,無需更新 Babel 或 Webpack 的設定檔。

🧰 經過更新的開發伺服器,支援伺服器端的熱重載,並可以在未來的版本中支援用戶端的熱重載。

🤓 一款名為 pwa-kit-dev 的全新命令列工具,當中包含我們推薦的開發工具,像是 Webpack、Babel、Jest,支援零設定專案範本。

🖌️ 提供非 React 應用程式的實驗性支援,適合有興趣使用 Managed Runtime 來代管其他基於 Express 的應用程式 (不只是 Retail React App) 的使用者。

若您尚未產生 PWA Kit 專案,請參閱快速入門指南來使用 v2 產生新專案。

我們已讓 v1.5 到 v2 的升級流程變得再簡單不過,只需變更少量的現有專案檔案即可。

如果您是從 v1.4 (或更早版本) 升級,則流程和從 v1.5 升級一樣,只是多了一個步驟。請更新所有涉及 pwa-kit-react-sdkimport 陳述式,讓匯入路徑不再包含 dist/ 資料夾。

請繼續閱讀,完成剩下的升級任務 (適用於 v1.5 和 v1.4 使用者)。

若要開始升級流程,請從專案的根目錄開啟 package.json

新增並安裝三個新的 pwa-kit-* 套件:

移除以下相依性。新的 pwa-kit-dev 工具現在可以為您處理這些相依性。(如果版本號碼與您專案中的版本號碼不盡相符,仍請直接移除。)

將這些 NPM 指令碼轉換為使用新的 pwa-kit-dev

從專案的根目錄開啟 babel.config.js,並將整個檔案替換為這一行:

如果您對 Babel 設定進行過任何自訂,請將它們新增到對 require() 函式的呼叫下方。

如果您尚未自訂專案根目錄中的 webpack.config.js 檔案,請將其刪除。系統會自動為您載入預設的設定檔。

如果您確實有自訂項目,則必須先呼叫 require() 函式後再新增自訂項目,才能獲得基本設定:

在 v2 中,用來建立 Express 伺服器的方法已經變更。createApp 方法已被棄用,由稱為 getRuntime 的方法取代。

getRuntime 方法會傳回執行階段物件。您可以使用 createHandler 方法來建立與 Managed Runtime 相容的 lambda 處理常式。第二個引數是回呼函式,讓您可以存取 Express 應用程式,以便自訂 Express 應用程式。例如,您可以使用回呼函式來實作自訂端點。

在 v2 中,body-parser 資產庫已從 Express 應用程式中移除。如果您的自訂端點需要剖析及預填 req.body,請安裝 body-parser 資產庫,方法是執行 npm install body-parser,並在 ssr.js 中納入本文剖析器資產庫:

凡是使用 getConfig 時,請從新的 pwa-kit-runtime 套件中將其匯入:

開啟 worker/main.js 並新增這條新路由:

在 v2 中,必須明確定義每個 Managed Runtime 環境的 Proxy 設定。在 v1 中,有一個遞補機制,可讓 Managed Runtime 環境使用與本機開發環境相同的 Proxy 設定。由於效能與維護問題,v2 專案不支援此遞補機制。

若要瞭解如何使用 Runtime Admin 工具或 Managed Runtime API 來為 Managed Runtime 環境進行 Proxy 設定,請參閱 Proxy 要求

您還可以利用 v2 中環境特定的設定這項新功能,為您的 Managed Runtime 環境進行 Proxy 設定。

在 v2 之前,PWA Kit 支援 Node 12.x。使用 v2 時,請務必確保您的程式碼適用於 Node 16+。

若要測試您的變更是否成功,請執行以下命令:

  1. npm start 驗證應用程式是否能於本機執行。
  2. npm run build 驗證建置流程是否成功。
  3. npm run push (並透過 Runtime Admin 部署) 驗證套件部署是否成功。