PWA Kit 概觀
這篇概觀簡單介紹 PWA Kit 架構的主要部分，並為您提供其他產品文件相關的內容。
Retail React App 是針對電子商務進行最佳化的伺服器端轉譯型 React 應用程式。其包含的主要功能可讓您開始建立網店，包括：
- 程式碼打包、程式碼分割、轉換
- 主題元件資產庫
- JavaScript 為主的樣式系統 (CSS-in-JS)
- 用於自動化例行開發任務的指令碼
- Progressive Web App (PWA) 功能的服務背景工作和資訊清單
- 測試套件
Retail React App 的網店包括標準電子商務頁面和功能，像是產品清單頁面 (PLP)、產品詳細資訊頁面 (PDP)、購物車和結帳頁面。網店的每一個面向都是為了增強和延伸您自有的程式碼而設計。
若要進一步瞭解，請閱讀完整的架構指南 → Retail React App。
為了提供最好的購物者體驗，PWA Kit 網店使用的轉譯和路由系統會在兩個不同的環境中執行相同的原始程式碼：分別是伺服器端和用戶端。伺服器端轉譯能最佳化初始頁面載入速度，而用戶端轉譯則會啟用回應式使用者介面和順暢頁面轉場。
轉譯和路由系統是由 Retail React App 以其 Express 伺服器設定和階層化的 React 元件所建立而成。有了這個系統，您可：
- 新增頁面元件並修改現有的頁面元件
- 從 API 要求或使用者互動，供應資料給頁面元件
- 定義路由 URL 要求到頁面元件的模式
- 自訂所有頁面的輸出
PWA Kit 是代管在 GitHub 上的開源專案。
PWA Kit 的 GitHub 存放庫設為具有多個套件的 Monorepo，包括程式庫、專案範本、SDK 和其他工具。
為了協助您瀏覽存放庫，以下概述當中包含的每個套件：
| 套件 | 描述 |
|---|---|
| commerce-sdk-react | React Hook 程式庫，用於從 Salesforce B2C Commerce 擷取資料。 |
| internal-lib-build | pwa-kit 存放庫中其他套件使用的內部工具。 |
| pwa-kit-create-app | 根據專案範本產生 PWA Kit 專案的工具。 |
| pwa-kit-dev | 用於開發、建置、部署 PWA Kit 專案的命令列工具。 |
| pwa-kit-react-sdk | 支援轉譯 Pipeline 的元件及公用程式庫。 |
| pwa-kit-runtime | 讓 Node.js 應用程式能夠在 Managed Runtime 上運作的執行階段環境庫。 |
| template-express-minimal | 簡單的專案範本，適用於在 Managed Runtime 上執行的應用程式。 |
| template-retail-react-app | 包含同構 JavaScript 網店的專案範本。 |
| template-typescript-minimal | 零設定專案範本，適用於以 PWA Kit SDK 建置的 TypeScript 應用程式。 |