从 Package.json 将环境变量传递给 React 应用程序答案

【问题标题】：Passing Environment variables to React application from Package.json从 Package.json 将环境变量传递给 React 应用程序
【发布时间】：2019-09-13 02:24:06
【问题描述】：

关注这篇文章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 中传递环境变量并构建我的应用程序并访问我的应用程序中的变量值。

【问题讨论】：

标签： reactjs npm environment-variables create-react-app

【解决方案1】：

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

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

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

【讨论】：

【解决方案2】：

您可以使用 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"
      }
    }
  }
}

这个库有更高级的用法，我认为从长远来看可能会对您的项目有所帮助

【讨论】：

效果很好，但是......我必须通过 aws amplify 托管这个应用程序......我想为具有不同 REST API 端的多个区域托管它......我想我会通过 rest api url 端点在我的环境变量中并在我的应用程序中使用..我现在可以做到这一点，但我真的想要一种方法让客户端更改构建设置中的变量值并将应用程序部署到多个区域......无论如何都有可能?
@umer 是的，这种用例很常见，而且绝对是可能的。根据你的 CI 工具，如果是 google cloud，你可以使用多个 .yaml 文件定义不同的值，并选择动态部署哪个
从 .yaml 文件中我想传递这个环境变量，以便我的 react 应用程序可以访问它。我将如何从 .yaml 文件中传递它，这是 aws cloudformation，它包含构建设置我的反应应用程序
我不是很熟悉aws来回答你的问题，如果你搜索aws文档应该有办法。
如果你真的想使用命令行，也许你可以尝试安装cross-envnpm包，然后你可以运行cross-env REACT_APP_SECRET_CODE=123 react-scripts build