在 React.js 中使用環境變數
Managed Runtime 環境變數可讓您將變數新增至在某個環境中執行的應用程式程序當中，而無需變更程式碼。環境變數能安全儲存，是下列使用案例的理想選擇：
- 呼叫受 API 金鑰保護的第三方資源
- 有條件地改變 React.js 轉譯
如需更多詳細資料，請參閱環境變數。
在本教學中，我們將使用環境變數，在不變更程式碼的情況下變更 React.js 轉譯。您可以透過 process.env 存取環境變數，這只能在 Node.js 中取得，無法在瀏覽器中取得。PWA Kit 轉譯是同構的，因為它在用戶端和伺服器端都會轉譯。因此，要使環境變數在 React.js 中可用，您可以將它們新增到 PWA Kit 設定檔中，如本教學所示。
在此範例中，我們將使用環境變數，在您的網站上啟用功能。例如，在有限的時間內，您可以測試一項新功能 (如快速結帳)。然後，您可以監控購物者對該功能的參與度，以瞭解其影響。
要完成本教學，請首先：
- 獲得 Managed Runtime 和 Runtime Admin 的存取權。請參閱 Managed Runtime 管理。
- 擁有 API 金鑰以使用 Managed Runtime API。若要尋找您的 API 金鑰，請登入 Runtime Admin 工具，並前往 Account Settings (帳戶設定) 頁面。
- 在您要為其設定環境變數的專案中，擁有開發人員或管理員角色。如果您沒有存取權限，請要求具有 Managed Runtime 管理員角色的人員來協助您。
在執行本教學的命令之前，請以實際值取代預留位置。預留位置的格式為：$PLACEHOLDER
在您的專案中，建立您選擇的內容或功能。例如，在首頁上建立英雄橫幅。
-
要在目前的工作階段中設定環境變數，請開啟終端機並執行以下命令：
- Windows：
set ENABLE_FEATURE='true' - 大部分的類 Unix 作業系統，包括 macOS：
export ENABLE_FEATURE=‘true’
- Windows：
-
請執行以下命令，檢查環境變數設定是否正確：
- Windows：
echo %$ENABLE_FEATURE% - 大部分的類 Unix 作業系統，包括 macOS：
echo $ENABLE_FEATURE
該命令會傳回以下輸出：
true - Windows：
-
將此 JavaScript 程式碼新增至專案的設定檔 —
config/default.js：
- 將此 JavaScript 程式碼新增至專案的首頁 —
app/pages/home/index.jsx：
- 使用
npm start啟動開發伺服器，然後在本機上前往首頁，查看轉譯的功能。
建議在非 Production 環境中測試這些步驟，然後再將變更部署到生產 Production 環境。
在執行本教學的命令之前，請以實際值取代預留位置。預留位置的格式為：$PLACEHOLDER
- 使用 cURL 呼叫 projects_target_env_var_partial_update API 端點，並將功能旗標設定為環境變數。這將部署您的套件。等待環境重新部署，然後再在程式碼中使用環境變數。您還可以使用 Runtime Admin 來管理環境變數。請參閱環境變數。
- 將套件從本機電腦部署到您選擇的環境。