从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 Code终端运行此构建命令时，

npm run build 

我得到了一个错误，提示REACT_APP_SECRET_CODE不被识别为内部或外部命令。

我该如何在`package.json`中传递环境变量并构建我的应用程序，并在我的应用程序中访问变量值。

- umer

Answer 1

如果您不想安装其他库，可以像这样将环境变量传递给yarn或npm命令：

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

注意：请在环境变量中加入前缀“REACT_APP_”，否则React将不允许在应用程序中使用它。

- akzarma

Answer 2

你可以用better-npm-run包以一种简洁的方式来完成（在我看来）。

{
  "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"
      }
    }
  }
}

这个库还有更高级的用法，我认为这可能会在你的项目中对你有长远的帮助。

- Jee Mok

---

好的，那个方法是有效的，但是...我必须通过AWS Amplify来托管这个应用程序，并且我想为多个地区使用不同的REST API端点进行托管。我原以为我可以将REST API的URL端点传递给我的环境变量，并在应用程序中使用。现在虽然我可以做到这一点，但我真的希望客户能够在构建设置中更改变量值并部署应用程序到多个地区...有可能吗？ - undefined

@umer 是的，这种用例很常见，而且肯定是可行的。根据你使用的 CI 工具，如果是 Google Cloud，你可以使用多个 .yaml 文件来定义不同的值，并动态选择要部署的文件。 - undefined

我想从.yaml文件中传递环境变量，以便我的React应用程序可以访问它。我该如何从.yaml文件中传递这个变量？这是AWS CloudFormation，并且它包含了我的React应用程序的构建设置。 - undefined

@JeeMok 我应该如何将.yaml文件中的环境变量注入到我的React应用程序中？ - undefined

根据您的使用情况，还有其他更好的方法来注入环境变量；如果您正在使用.yaml文件，我假设您可能已经设置了CI/CD？如果是这样，那么您应该将其添加到您的流水线或配置yaml文件中。 - undefined