javascript - 在 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