将环境变量从 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 将不允许它在应用程序中使用。