在 React 應用程序中檢查 HTML 文件中的生產和暫存環境

Question

我正在嘗試在我的 React 應用程序中集成一個 3rd 方應用程序。 我必須為生產和登台使用不同的密鑰，但我無法弄清楚如何在 React 和 Node 應用程序中實現這一點，我可以通過process.env來實現，但在index.html中我無法弄清楚如何實現這一點.

這是我的偽代碼，我試圖為我的React項目提取我的index.html文件

 <script> if(env === production){ some_app.init('TOKEN_FOR_PRODUCTION'); } else{ some_app.init('TOKEN_FOR_STAGING_OR_DEV'); } </script>

Answer 1

雖然我個人更喜歡將所有 API 密鑰存儲在服務器本身上，但本指南表明還有其他方法可以做到這一點：

https://www.geeksforgeeks.org/how-to-hide-your-api-keys-from-public-in-reactjs/

此外，要單獨在前端定義 prod 和 staging 之間的差異，我建議使用 webpack 定義插件變量：

https://webpack.js.org/plugins/define-plugin/