我們如何在 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/