如何从前端访问环境变量

Question

我在编译脚本中定义了几个环境变量。但是，我只能从 webpack.config.babel.js 文件访问这个变量，我需要在反应代码（前端）中访问这个变量。

我在这里找到了一种方法：https://blog.container-solutions.com/deploying-configurable-frontend-web-application-containers，但我认为放入元数据不是一个好主意例如，标记数据库密码等数据。尽管如此，试图只为 .env 文件做这件事对我来说不起作用:(

所以，我的问题是如何从前端访问环境变量？

编辑我：

我已经应用了@robi932 的明智建议，但它对我不起作用:(

webpack.config.babel.js

plugins: [
    new HtmlWebpackPlugin({
        template: "./src/client/index.html",    //where is our template
        filename: "../index.html",              //where we are going to put our index.html inside the output directory
        minify: {
            collapseWhitespace: true,
            removeComments: true,
            removeRedundantAttributes: true,
            removeScriptTypeAttributes: true,
            removeStyleLinkTypeAttributes: true,
            useShortDoctype: true
        }            
    }),
    new MiniCssExtractPlugin({
        filename: "css/bundle.css",
        minify: {
            collapseWhitespace: true,
            removeComments: true,
            removeRedundantAttributes: true,
            removeScriptTypeAttributes: true,
            removeStyleLinkTypeAttributes: true,
            useShortDoctype: true
        }             
    }),
    new webpack.DefinePlugin({
        URL_FEB_API: JSON.stringify(process.env.URL_FEB_API)
    })

我定义了 const URL_FEB_API 以便稍后在我的 react-js 代码中使用它，但是当我尝试访问它时，它不起作用:(

console.log("HomeLF1Content process.env.URL_FEB_API: " + URL_FEB_API);

或者

console.log("HomeLF1Content process.env.URL_FEB_API: " + process.env.URL_FEB_API);

这是我在 package.json 中的编译脚本：

    "clean": "rm -rf ./dist",
    "compile-dev": "NODE_ENV=development URL_FEB_API=http://localhost:4000/api/feb/graphiql webpack -d --config ./webpack.config.babel.js --progress",
    "dev": "npm run clean && npm run compile-dev && cross-env NODE_ENV=development nodemon --exec babel-node src/server/server.js --ignore ./src/client"

我究竟做错了什么？

解决方案：

感谢这个链接https://medium.com/@trekinbami/using-environment-variables-in-react-6b0a99d83cf5由@Shubham Jain 提供，最后我找到了一个很好的解决方案来定义前端的环境变量。

然后，我将解释我为解决问题而遵循的步骤。

首先，每个环境我们需要两个 .env 文件。现在，我们有两个环境：开发和生产。因此， .env.development 将是我们要配置所有开发变量的文件， .env 将是我们要配置所有生产变量的文件。

其次，要选择之前创建的文件之一，我们需要告诉 node 哪个文件进行编译，因此在我们的编译脚本中，我们必须定义一个变量，我们将调用 NODE_ENV，我们将在其中使用“development ”或“生产”。

开发脚本：

"clean": "rm -rf ./dist",
"compile-dev": "NODE_ENV=development webpack -d --config ./webpack.config.babel.js --progress",
"dev": "npm run clean && npm run compile-dev && cross-env NODE_ENV=development nodemon --exec babel-node src/server/server.js --ignore ./src/client",

生产脚本：

"clean": "rm -rf ./dist",
"compile": "NODE_ENV=production webpack -p --config ./webpack.config.babel.js --progress",
"start": "npm run clean && npm run compile && cross-env NODE_ENV=production babel-node src/server/server.js --ignore ./node_modules",

第三，现在，我们将在 webpack.config.babel.js 文件中添加一些代码，以根据 NODE_ENV 变量的值选择环境变量。

import webpack from "webpack";
import path from "path";
import dotenv from "dotenv";
import fs from "fs";
/**
 * Code to get the values of environment variables during compilation time for the front-end
 */
//Get the root path. Our .env files and webpack.config.babel.js files are in the root path
const currentPath = path.join(__dirname);
const basePath = currentPath + "/.env";
// We're concatenating the environment name to our filename to specify the correct env file!
const envPath = basePath + "." + process.env.NODE_ENV;
// Check if the file exists, otherwise fall back to the production .env
const finalPath = fs.existsSync(envPath) ? envPath : basePath;
// Set the path parameter in the dotenv config
const fileEnv = dotenv.config({ path: finalPath }).parsed;
// reduce it to a nice object, the same as before
const envKeys = Object.keys(fileEnv).reduce((prev, next) => {
  prev[`process.env.${next}`] = JSON.stringify(fileEnv[next]);
  return prev;
}, {});

第四，在 webpack.config.babel.js 文件中，在插件部分，我们必须在编译项目时添加对这个变量的访问：

plugins: [
    //With this entry we can get access to the environment variable for front-end
    new webpack.DefinePlugin(envKeys),
],

而最后，他都能在前端这些变量，我们可以很容易地访问它们process.env.VARIABLE_NAME其中VARIABLE_NAME是在文件中定义的变量之一.ENV或.env.development。

请投票给@Shubham Jain 给出的答案，因为他的链接对我非常有用。

Answer 1

有一个非常简单的方法：

第一步：转到应用程序的根文件夹并创建一个名为 .env 的文本文件。

第二步：在新文件中创建自定义变量。Create React App(CRA) 在每个自定义变量上强制使用前缀 REACT_APP。请注意，没有前缀的变量在捆绑期间会被忽略。

REACT_APP_CLIENT_ID=jfjffffaddfeettgydgdffv
REACT_APP_KEY=aaddddawrfffvvvvssaa

第三步：将它们分配给变量，将它们打印到屏幕等，但它们在您的 Javascript 文件中是只读的。

console.log(process.env.REACT_APP_CLIENT_ID); 
console.log(process.env.REACT_APP_KEY);

第四步：有一个名为 NODE_ENV 的内置环境变量。您可以从 process.env.NODE_ENV 访问它。这个变量会根据你当前所处的模式而变化。当你运行 npm start 时，它等于 'development'，当你运行 npm test 时它等于 'test'，当你运行 npm run build 时它等于'生产'。此变量很特殊，因为它可用于根据您的模式访问不同的环境配置。例如，如果您的生产和开发有不同的数据库（通常是为了防止干扰），您可以使用它来有条件地访问某些变量。您无法手动覆盖 NODE_ENV 这一事实可防止开发人员意外地将开发构建部署到生产环境中。

第五步：打开 .gitignore 文件。我喜欢将 .env 和其他环境变量放在 #misc 下。

为什么即使在遵循这些过程后它也不起作用？

• 确保在每个变量上都使用了前缀 REACT_APP

• 确认 .env 文件中的变量名与 js 文件中的变量名匹配。例如，.env 中的 REACT_APP_KEY 与 process.env.REACT_APP_KY

• 如果开发服务器正在运行，请停止它，然后使用 npm start it 重新运行。我真的很挣扎（变量是未定义的错误）。每次更新 .env 文件时，都需要停止服务器并重新运行它，因为环境变量仅在构建期间更新（变量为未定义错误）。

• 从变量的值中删除引号。

错误的

REACT_APP_KEY=”AHEHEHR”

对

REACT_APP_KEY=AHEHEHR

注意：将敏感内容放入环境变量并不能使它们安全。它们在构建过程中被注入到捆绑文件中，因此任何人都可以通过检查您的文件来查看它们。我发现它们最大的用途是在将我的代码推送到远程存储库之前隐藏信息。

Answer 2

如何在React项目中配置.evn文件

1. 只需创建 .env 文件。
2. 需要将您的配置放入 .env 文件中，例如

REACT_APP_FIREBASE_REALTIME_DB=https://sample.firebaseio.com/
REACT_APP_FIREBASE_API=FFYTYt67567yhhhmnbdfgjd7erehfjdhfjd

注意：您必须提及，REACT_APP然后才能提及您的标识符。它是每个 .ENV 变量的前缀。

例如： REACT_APP_FIREBASE_REALTIME_DB

3. 将代码放入您喜欢的文件中

process.env.REACT_APP_FIREBASE_REALTIME_DB
process.env.REACT_APP_FIREBASE_API

Answer 3

我的情况是你想要直接的解决方案。有一个名为 的第三方库dotenv-webpack。更多信息请点击此处

const Dotenv = require('dotenv-webpack');

module.exports = {
  ...
  plugins: [
    new Dotenv()
  ]
  ...
};

Answer 4

如果您来自 Windows，则可以使用以下方法，如果您来自 Linux，则方法很简单。你可能在 Linux 中没有遇到过这个问题，因为 dotfile 是 Linux 中的一个东西

方法一：windows下的dotenv

.env要访问Windows 中文件中的元素，可能需要执行此步骤

npm install dotenv

.env然后在根文件夹中创建一个文件

API_KEY='SomeAPIkey'
API_PASS='ReallySecretPassword12345'

'没有必要，除非你有一些由空格分隔的字符串

并在您的main.js文件中导入 dotenv 包

const dotenv = require("dotenv");

dotenv.config({ path: ".env" });

const key = process.env.API_KEY;
console.log(key);

如果您来自 Linux，则不需要 dotenv 包即可工作。

方法二：通过终端设置环境变量

+ 在cmd中

set API_KEY='SomeAPIkey'
set API_PASS='ReallySecretPassword12345'

+ 在 powershell 中

$env:API_KEY='SomeAPIkey'
$env:API_PASS='ReallySecretPassword12345'

+ 在 bash/wsl 中

export API_KEY='SomeAPIkey'
export API_PASS='ReallySecretPassword12345'

main.js

const key = process.env.API_KEY;
console.log(key);

方法 2 的问题在于，您的环境变量仅在您保持终端会话打开时才有效。一旦您关闭终端或关闭计算机，您的环境变量就会丢失。我建议您尝试创建一个脚本文件并将其文件名添加到.gitignore

Answer 5

Webpack 的 Define 插件可以帮助您将配置中的变量发送到您的 React 应用程序。
请参阅此处https://webpack.js.org/plugins/define-plugin/