将 dotenv 与 react 和 webpack 结合使用

Question

我正在查找可以将 dotenv 与 react 结合使用的信息

import React from "react"
console.log(process.env.REACT_APP_API_KEY)

.env然而，当我在我的方向的根目录中创建我的文件时，我undefined在控制台中收到一条消息。

我应该注意我没有使用 react-create-app。

这是我的.env文件

REACT_APP_API_KEY=secretKey

这是我的 webpack 配置文件。

有什么方法可以在不使用 node.js 和创建小型服务器的情况下使用 dotenv。

我已经在这里待了几个小时了，但我似乎无法在网上找到我需要的东西。希望之前有人遇到过这个问题。

Answer 1

有dotenv-webpack专门针对这种情况的插件。设置非常简单：// webpack.config.jsconst dotEnv = require('dotenv-webpack')module.exports = {  plugins: [new dotEnv()]}编辑这个答案对于评论来说太冗长了：您正在添加dotEnv到错误的plugins属性。module: {    rules: [      cssConfig,      {        test: /\.js$/,        exclude: /(node_modules)/,        use: {          loader: "babel-loader",          options: {            presets: ["@babel/preset-react", "@babel/preset-env"],            plugins: [/* WRONG */ new dotEnv(), "@babel/plugin-transform-runtime"]          }        }      }    ]  }什么时候应该在这里添加：if (currentTask == "dev") {  config.plugins = [/* RIGHT */ new dotEnv()]}

Answer 2

dotenv变量将仅在 webpack 中可用，并且process用于 webpack 未编译的内容。为了使您的环境变量在 webpack 编译文件中可用，您需要使用 webpack 的定义或环境插件注入它。这将在编译过程中用环境变量替换文件中的所有环境字符串。您的密钥未定义的原因是因为当 webpack (babel) 编译它时该字符串不存在，因为它从未通过 webpack 环境变量被替换/注入。

Answer 3

在你想要使用环境变量的文件顶部添加：import dotenv from 'dotenv';dotenv.config();一切都应该正常工作：p关于 fs 模块的错误，您是否尝试将以下代码段添加到您的 webpack 配置中？node: {  fs: 'empty'}

Answer 4

我建议使用dotenv-webpack来访问.env文件变量。在 Webpack 配置文件中添加以下内容：// webpack.config.jsconst Dotenv = require('dotenv-webpack');...let config = {  entry: "./app/assets/scripts/App.js",  plugins: pages,  ...};config.plugins.pushes(new Dotenv());...