Question

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

我在这里找到了一种方法：docs，但是我认为放入元标记数据（例如数据库密码）不是一个好主意。尽管如此，仅尝试对.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"

我在做什么错了？

解决方案：

感谢@Shubham Jain提供的tests链接，终于找到了为前端定义环境变量的好方法。

然后，我将解释我为解决问题所采取的步骤。

首先，每个环境我们需要两个.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文件中，在“插件”部分中，我们必须在编译项目时添加对此变量的访问权限：

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

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

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重新运行它。我真的为此感到挣扎（变量是未定义的错误）。每次更新.env文件时，都需要停止服务器并重新运行它，因为环境变量仅在构建期间更新（变量是未定义的错误）。
从变量的值中删除引号。

错

REACT_APP_KEY=”AHEHEHR”

右

REACT_APP_KEY=AHEHEHR

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

Answer 2

Webpack可以帮助您将配置中的变量发送到您的React应用（Define插件）。
在这里https://webpack.js.org/plugins/define-plugin/

Answer 3

我想你想直接解决。有一个名为dotenv-webpack的第三方库。更多信息here

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

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

Answer 4

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

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

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

注意：您必须提及REACT_APP，然后才能提及您的标识符

例如： REACT_APP_FIREBASE_REALTIME_DB

将代码放入您的首选文件

process.env.REACT_APP_FIREBASE_REALTIME_DB
process.env.REACT_APP_FIREBASE_API

Answer 5

- Create .env file in root folder

 - Open to .env file

     --> REACT_APP_API_KEY= API KEY
    **NOTE** starting with the prefix REACT_APP_ (IMPORTANT)

 - Access it use process.env
  eg  const  {REACT_APP_API_KEY,REACT_APP_TEMPLATE_ID,REACT_APP_SERVICE_ID} = process.env

 - And use with template string
 eg emailjs.send(`${REACT_APP_SERVICE_ID}`,`${REACT_APP_TEMPLATE_ID}`, values, `${REACT_APP_API_KEY}` )
      .then((response) => {
         console.log('SUCCESS!', response.status, response.text);
      }, (err) => {
         console.log('FAILED...', err);
      });

    

When you do any changes or need to create at .env file don't forget to restart  
appliction "npm start"

反应：如何从前端访问环境变量

5 个答案: