React 專案中的環境變數

現代 Web 應用程式大量使用各種型別的 API。為了使它們工作，他們需要金鑰或其他一些資訊來識別和跟蹤每個 API 的使用。持有 API 金鑰是環境變數的眾多應用之一。通常，它們的主要目的是儲存對 Web 開發必不可少的憑據。它還為應用程式開發人員提供了在需要時調整配置資料的單一空間。這樣，就無需手動查詢和編輯配置資料的每個例項。

起初，React 環境變數可能會令人困惑，尤其是對於沒有後端經驗的人。但是，打算在大型應用程式上工作的開發人員應該熟悉環境變數。

React 環境變數的規則

請注意，儲存在環境變數中的值不是私有的。例如，它們對於儲存祕密 API 金鑰並不實用。部署應用程式後，環境變數值將在原始碼中可見。每次新增環境變數時，都必須在引用儲存在其中的值之前重新啟動應用程式。

create-react-app 中的環境變數

使用 create-react-app 構建的 React 專案使用 react-scripts 版本@0.5.0 或更高版本支援環境變數，因此不需要外部包。

只要你安裝了最新版本的 create-react-app 包，你需要做的就是在主目錄中建立一個 .env.local 檔案（包含 README.md、package.json 和其他檔案）並使用它來定義變數。下面是一個例子：

REACT_APP_CREDENTIAL_DATA = 'some-credential-data'

.env.local 副檔名是必要的，以確保在專案初始化時將檔案自動新增到 .gitignore 檔案中。

要使用 create-react-app 對環境變數的內建支援，你必須在變數名稱前加上 REACT_APP。

沒有 create-react-app 的環境變數

如果你有一個沒有 react-scripts 的自定義 React 環境，你需要安裝一個外部包才能在 React 中使用環境變數。

為此，你可以安裝專門為此目的構建的流行的 dotenv 包。

首先，你必須在專案資料夾中開啟命令列並安裝此包：

npm install dotenv

然後，你必須使其可用並配置設定。將以下程式碼新增到應用程式：

require('dotenv').config()

完成此操作後，你可以在資料夾中建立一個 .env.local 檔案，就像使用 create-react-app 構建的應用程式一樣。你還必須以 REACT_APP 字首開頭變數名。