我在编译脚本中定义了几个环境变量，但是，我只能从webpack.config.babel.js文件访问这些变量，我需要在react代码（前端）中访问这些变量。
我在这里找到了一种方法：https://blog.container-solutions.com/deploying-configurable-frontend-web-application-containers，但我不认为这将是一个好主意，把 meta标记数据，如数据库密码，例如.尽管，试图只做的方式.env文件它不工作给我：（
因此，我的问题是，如何从前端访问环境变量？

编辑I：

我已经应用了@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"

我哪里做错了？

解决方案：

感谢@Shubham Jain给予的链接https://medium.com/@trekinbami/using-environment-variables-in-react-6b0a99d83cf5，最终我找到了一个很好的解决方案来定义前端的环境变量。
然后，我将解释我解决问题所遵循的步骤。

**首先，**每个环境需要两个.env文件。现在，我们有两个环境：开发和生产。因此，.env.development将是用于配置所有开发变量的文件，而.env将是用于配置所有生产变量的文件。
第二个，要选择之前创建的文件之一，我们需要告诉节点要编译哪个文件，因此在编译脚本中，我们必须定义一个名为NODE_ENV的变量，我们将在该变量中使用“development”或“production”进行初始化。

• 开发脚本：*

"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给予的答案，因为他的链接对我非常有用。