从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不允许其在应用程序中使用。