在部署 React JS 應用程序期間如何使用不同的配置文件？

Question

我有 3 個環境，我使用 Sharepoint 作為后端。 每個環境都有不同名稱的字段。 問題是我無法更改這些字段的內部名稱。

我正在使用 REST API 調用 SharePoint 端點，如下所示：

/sites/someSite/_api/web/lists/getbytitle('list1')/items?$select=field1,field2[etc]

在我的react app中，我想實現以下目標：

1. 將這個相對 url /sites/someSite存儲在應用程序根目錄的某個位置，並在應用程序的任何地方訪問它
2. 每個環境都有一些名稱不同的字段，例如：

• 開發者：field1
• acc: field1 被稱為 col1
• 產品：field1 被稱為 fieldCol1 等

這些字段用於我的 rest api 查詢。

How can I configure my application so that during deployment, a configration file can be
 used or some other means to assign the correct fields to each REST API call?

我可以使用某種 if else 分支，但這似乎不現實。

開發：

/sites/someSite/_api/web/lists/getbytitle('list1')/items?$select=field1,field2,field3,field4, etc

帳戶：

/sites/someSite/_api/web/lists/getbytitle('list1')/items?$select=col1,field2,col3,field4, etc

產品：

/sites/someSite/_api/web/lists/getbytitle('list1')/items?$select=fieldCol1,fieldCol2,field3,field4, etc

Answer 1

為此，您可以為您的應用程序維護 3 個單獨的配置/env 文件（dev.env，...）。 首先使用 npm dotenv和env-cmd依賴項進行安裝。 將以下腳本添加到 package json 文件中。

    scripts": {
        "start:dev": "env-cmd -f dev.env npm start" 
        "start:prod": "env-cmd -f prod.env npm start"
...
}

如果您想使用開發環境啟動 React 應用程序。 您可以使用

npm run start:prod

然后像下面提到的 url。

"/sites/someSite/_api/web/lists/getbytitle('list1')/items?$select="+ SELECT

您可以使用require('dotenv').config()來讀取環境。

dev.env 文件如下。

SELECT = col1,col2...