我们如何在 react.js 中正确使用环境变量和 env.config.js 文件（我重新加载后未定义）

Question

当我使用npm run start运行项目时，它在重新加载我的 env.config.js 给未定义变量后工作正常我遇到了 env-config.js 文件的问题。 我在下面这样实现

应用程序.js 文件

import "./App.css";

function App() {
  const Query = window._env_.REACT_APP_QUERY;
  console.log(Query);
  return (
    <div className="App">
      <h1>hello world</h1>
    </div>
  );
}

export default App;

这是env-config.js 文件

window._env_ = {
  REACT_APP_GRANT: "grate",
  REACT_APP_CLIENT: "simple",
};

最后是 package-json 文件中的脚本

 "scripts": {
    "start": "chmod +x .\\env.sh  && cp env-config.js .\\public/ && .\\env.sh && react-scripts start",
    "dev": "chmod +x ./env.sh && ./env.sh && cp env-config.js ./public/ && react-scripts start",
    "test": "react-scripts test",
    "eject": "react-scripts eject",
    "build": "react-scripts build"
  },

我不知道脚本中提到的这个文件，然后我将它复制到这里env.sh

#!/bin/bash

# Recreate config file
rm -rf ./env-config.js
touch ./env-config.js

# Add assignment 
echo "window._env_ = {" >> ./env-config.js

# Read each line in .env file
# Each line represents key=value pairs
while read -r line || [[ -n "$line" ]];
do
  # Split env variables by character `=`
  if printf '%s\n' "$line" | grep -q -e '='; then
    # tollerate = surrounded by blanks: ' = ' 
    varname=$(printf '%s\n' "$line" | sed -E 's/^([a-zA-Z_-]+) *= *(.*)$/\1/')
    varvalue=$(printf '%s\n' "$line" | sed -E 's/^([a-zA-Z_-]+) *= *(.*)$/\2/')
  fi

  # Read value of current variable if exists as Environment variable
  value=$(printf '%s\n' "${!varname}")
  # Otherwise use value from .env file
  [[ -z $value ]] && value=${varvalue}
  
  # Append configuration property to JS file
  echo "  $varname: \"$value\"," >> ./env-config.js
done < .env.local

echo "}" >> ./env-config.js

我正在使用 git bash 终端和npm run start命令运行我的项目

1. 我不想为某些变量使用 .env 文件，因为我无法使用 docker 构建命令覆盖

2. 我们如何在重新加载项目后获取 env-config.js 变量而不会出现未定义。

我不再确定env.sh file我无法理解他们之前编码的内容，甚至不知道它的用途

Answer 1

脚本中的注释告诉你它在做什么。 它删除env-config.js文件，使用window._env_变量中的.env文件中的变量重新创建它。 因此，如果您没有.env文件，则不会向window._env_变量添加任何变量。

我建议你删除env.sh并使用dotenv npm package: https://www.npmjs.com/package/dotenv

1. 安装dotenv

npm i dotenv

2. 使用所需的变量创建.env文件

REACT_APP_GRANT=grate
REACT_APP_CLIENT=simple

3. 在env-config.js文件中使用dotenv

import * as dotenv from "dotenv";

// dotenv reads the .env file and adds the variables in
// there to process.env
dotenv.config()

window._env_ = {
  REACT_APP_GRANT: process.env.REACT_APP_GRANT,
  REACT_APP_CLIENT: process.env.REACT_APP_CLIENT,
};

成功！

如果您设置这样的变量： REACT_APP_GRANT=newgrant npm run start ，默认情况下， dotenv不会覆盖newgrant中的.env 。 如果您使用docker run --env REACT_APP_GRANT=newgrant myapp ，我相信在 docker 命令行中设置变量时同样会起作用

编辑：

显然， reactjs 已经使用dotenv ，因此您可能不需要安装它。 您需要做的就是创建.env文件并将REACT_APP_前缀添加到您的变量名称中，就像您已经在做的那样。 然后您可以通过process.env.REACT_APP_MY_VAR访问它们，就像我在示例中所做的那样。

阅读更多https://create-react-app.dev/docs/adding-custom-environment-variables/