將環境變量從 Package.json 傳遞給 React 應用程序

Question

按照這篇文章https://serverless-stack.com/chapters/environments-in-create-react-app.html

我正在嘗試將環境變量添加到我使用 create react app 創建的 react 應用程序中。 所以我的構建命令如下所示

 "build": "REACT_APP_SECRET_CODE=123 react-scripts build",

當我嘗試通過以下方式在我的 Visual Studio 代碼終端中運行此構建命令時

npm run build 

它給了我一個錯誤，即REACT_APP_SECRET_CODE未被識別為內部或外部命令。

我將如何在`package.json 中傳遞環境變量並構建我的應用程序並訪問我的應用程序中的變量值。

Answer 1

您可以使用Better-npm-run包以干凈的方式（imo）

{
  "devDependencies": {
    "better-npm-run": "~0.0.1"
  },
  "scripts": {
    "build": "better-npm-run build",
  },
  "betterScripts": {
    "build": {
      "command": "react-scripts build",
      "env": {
        "REACT_APP_SECRET_CODE": "123"
      }
    }
  }
}

這個庫有更高級的用法，我認為從長遠來看這可能對你的項目有幫助

Answer 2

如果您不想安裝任何其他庫。 您可以將環境變量傳遞給 yarn 或 npm 命令，如下所示：

"scripts": {
 "start": "breact-scripts start",
 "start:env": "REACT_APP_ABC=xyz yarn start",
}

注意：請記住在您的環境變量中添加前綴“REACT_APP_”，否則 React 將不允許它在應用程序中使用。