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

我们的JavaScript资源刚刚退出，所以我对前端开发一无所知，需要启动我的UI。我试图在javascript中使用一个环境变量，似乎有100种不同的方法

我只知道这是一个react/node应用程序。我用

npm run start

启动它。它需要一个我在.bash\u配置文件中定义的端点，

XREFS\u BACK\u URL

。我想我可以只使用

process.env.XREFS\u BACK\u URL

，但显然这必须在某个文件中定义？我不知道什么文件或它应该在哪里

对不起，我太糊涂了，这东西刚落在我的膝盖上，我得赶快把它拿起来

更新：

我在根目录中创建了一个

.env

文件。这是一行：

REACT_APP_XREFS_BACK_URL=http://localhost:8080

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

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

但是控制台显示

端点

是

未定义的

My 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"
  }
}

{
“名称”：“公告牌”，
“版本”：“0.0.1”，
“私人”：没错，
“依赖性”：{
“巴别塔笑话”：“^22.4.1”，
“巴别塔预设环境”：“^1.6.1”，
“巴别塔预设反应”：“^6.24.1”，
“笑话”：“^22.4.2”，
“反应脚本”：“0.2.1”，
“反应测试渲染器”：“^16.2.0”，
“网页包”：“^4.6.0”
},
“依赖项”：{
“字体真棒”：“^4.7.0”，
“匹配分类器”：“^2.2.1”，
“namor”：“^1.0.1”，
“npm”：“^6.0.0”，
“反应”：“^15.2.1”，
“react dom”：“^15.2.1”，
“反应拖动”：“^2.2.0”，
“反应表”：“^6.8.2”
},
“脚本”：{
“开始”：“反应脚本开始”，
“构建”：“反应脚本构建”，
“弹出”：“反应脚本弹出”，
“测试”：“开玩笑”
},
“笑话”：{
“scriptPreprocessor”：“/节点\模块/babel jest”，
“moduleFileExtensions”：[
“js”，
“json”，
“jsx”
],
“moduleNameMapper”：{
“^.*[.]（jpg | jpg | gif | gif | png | png | less | less | css）$”：“清空模块”
},
“预处理器重新模式”：[
“/node_modules/”
],
“unmockedModulePathPatterns”：[
“/node\u模块/react”，
“/node\u modules/react dom”，
“/node\u modules/react addons test utils”，
“/EmptyModule.js”
]
},
“eslintConfig”：{
“扩展”：“/node_modules/react scripts/config/eslint.js”
}
}

您的应用程序是用

创建反应应用程序制作的。以下是用于添加/引用环境变量的文档：

在名为
.env
的根文件夹中创建一个包含以下内容的文件：

REACT\u APP\u XREFS\u BACK\u URL=put\u which\u

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

process.env.REACT\u APP\u XREFS\u BACK\u URL
我不确定，如果这对你来说是真的，CNDyson，但我认为这对像我这样的新手可能有帮助：

npm安装--保存dotenv
在根目录中创建
.env
文件
在那里声明
REACT\u APP\u**变量\u名称**=不要忘记REACT\u APP
像这样使用：
process.env.REACT\u APP\u**变量\u NAME**
强烈建议浏览以下链接：

-官方文件

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

使用所描述的解决方案，您将永远无法执行docker run--env FOO=“value of FOO”my org/my app

然后访问应用程序中的

FOO

，如

process.env[“FOO”]

create react app

捆绑运行

warn build

时定义的环境变量

例如，如果希望访问docker容器签出中定义的环境变量，请执行以下操作：

---

您正在使用webpack吗？如果是这样的话，会有东西把它们带走并烧掉。我不相信我是……package.json

start

script调用

react scripts

？是的，它调用react-scripts.ah bingo。。。您有一个非常旧的react脚本版本。尝试更新react脚本并重新启动<代码>npm安装--保存开发人员响应-scripts@1.1.4我将.env文件放在应用程序的根目录中，但是

REACT\u app\u XREFS\u BACK\u URL

仍然是

未定义的

。你重新启动了应用程序吗我答应了！你能用你的

.env

文件更新你的问题吗？你正在控制台记录它的代码以及你的包中

react脚本的版本。jsonit的
process.env.react\u APP\u XREFS\u BACK\u URL非
process.env.XREFS\u BACK\u URL