javascript - 如何从前端访问环境变量

Question

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

我在这里找到了一种方法: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_ENV，我们将在其中使用“开发”或“生产”进行初始化。

开发脚本:

"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 文件中，在plugin 部分，我们必须在编译项目时添加对这个变量的访问:

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 时，它等于“开发”，当您运行 npm test 时，它等于“测试”，而当您运行 npm run build 时，它等于'生产'。此变量很特殊，因为它可用于根据您的模式访问不同的环境配置。例如，如果您的生产和开发有不同的数据库(通常是为了防止干扰)，您可以使用它来有条件地访问某些变量。您无法手动覆盖 NODE_ENV 的事实可防止开发人员意外地将开发构建部署到生产中。

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

为什么在遵循这些过程后仍无法正常工作？

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

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

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

• 从变量值中删除引号。

错

REACT_APP_KEY=”AHEHEHR”

对

REACT_APP_KEY=AHEHEHR

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