将 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.js

const 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.js

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

...

let config = {

  entry: "./app/assets/scripts/App.js",

  plugins: pages,

  ...

};

config.plugins.pushes(new Dotenv());

...