在React应用程序中使用环境变量

Question

我们的JavaScript资源刚刚退出，所以我对前端开发一无所知，需要让我的UI站起来。我试图在javascript中使用环境变量，似乎有100种不同的方法可以做到这一点。

我所知道的是这是一个react / node应用程序。我用npm run start开始。它需要我在.bash_profile XREFS_BACK_URL中定义的端点。我以为我可以使用process.env.XREFS_BACK_URL，但显然必须在某个文件中定义？我不知道文件或文件的位置。

很抱歉这么无能为力 - 这只是落在了我的腿上，我必须迅速把它搞定！

更新

我在根目录中创建了一个.env文件。这是一行：

REACT_APP_XREFS_BACK_URL=http://localhost:8080

在我的代码中，我尝试使用它：

var endpoint = process.env.REACT_APP_XREFS_BACK_URL;
console.log("endpoint is " + endpoint);

但控制台显示endpoint为UNDEFINED。

我的package.json在这里：

{
  "name": "bulletin-board",
  "version": "0.0.1",
  "private": true,
  "devDependencies": {
    "babel-jest": "^22.4.1",
    "babel-preset-env": "^1.6.1",
    "babel-preset-react": "^6.24.1",
    "jest": "^22.4.2",
    "react-scripts": "0.2.1",
    "react-test-renderer": "^16.2.0",
    "webpack": "^4.6.0"
  },
  "dependencies": {
    "font-awesome": "^4.7.0",
    "match-sorter": "^2.2.1",
    "namor": "^1.0.1",
    "npm": "^6.0.0",
    "react": "^15.2.1",
    "react-dom": "^15.2.1",
    "react-draggable": "^2.2.0",
    "react-table": "^6.8.2"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "eject": "react-scripts eject",
    "test": "jest"
  },
  "jest": {
    "scriptPreprocessor": "<rootDir>/node_modules/babel-jest",
    "moduleFileExtensions": [
      "js",
      "json",
      "jsx"
    ],
    "moduleNameMapper": {
      "^.*[.](jpg|JPG|gif|GIF|png|PNG|less|LESS|css|CSS)$": "EmptyModule"
    },
    "preprocessorIgnorePatterns": [
      "/node_modules/"
    ],
    "unmockedModulePathPatterns": [
      "<rootDir>/node_modules/react",
      "<rootDir>/node_modules/react-dom",
      "<rootDir>/node_modules/react-addons-test-utils",
      "<rootDir>/EmptyModule.js"
    ]
  },
  "eslintConfig": {
    "extends": "./node_modules/react-scripts/config/eslint.js"
  }
}

Answer 1

您的应用是使用create-react-app制作的。以下是添加/引用环境变量的文档：https://github.com/facebook/create-react-app/blob/master/packages/react-scripts/template/README.md#adding-custom-environment-variables

在名为.env的根文件夹中创建一个文件，其内容为：

REACT_APP_XREFS_BACK_URL=put_whatever_here

然后通过以下方式在JavaScript中访问此变量：

process.env.REACT_APP_XREFS_BACK_URL

Answer 2

不确定，如果它真的适合你，CNDyson，但我认为它可能对像我这样的新手有帮助：

1. npm install --save dotenv
2. 在根目录下创建.env文件
3. 声明REACT_APP_**VARIABLE_NAME** = dont forget about REACT_APP
4. 像这样使用它：process.env.REACT_APP_**VARIABLE_NAME**

强烈建议浏览这些链接：

https://create-react-app.dev/docs/adding-custom-environment-variables/ - 官方文档

https://www.npmjs.com/package/dotenv - dotenv

Answer 3

问题在于您通常希望访问托管应用程序的服务器上存在的环境变量。

使用所描述的解决方案，您将永远无法做到docker run --env FOO="value of foo" my-org/my-app 然后在应用程序中访问 FOO，例如 process.env["FOO"]。

create-react-app 捆绑运行 yarn build 时定义的环境变量。

例如，如果您想访问 docker 容器中定义的环境变量，请查看：react-envs