将Dotenv与React和Webpack一起使用

编程问答 2022-06-06

问题描述

我找到了可以与dotenv配合使用的信息

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

但是，当我在我的方向的根目录中创建.env文件时，会在控制台中收到undefined消息。

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

这是我的.env文件

REACT_APP_API_KEY=secretKey

这是我的webpack配置文件。

有什么方法可以使用dotenv而不使用node.js并创建小型服务器。

const currentTask = process.env.npm_lifecycle_event;
const path = require("path");
const { CleanWebpackPlugin } = require("clean-webpack-plugin");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const { postcss } = require("postcss-mixins");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const fse = require("fs-extra");

const postCssplugins = [
  require("postcss-import"),require("postcss-mixins"),require("postcss-simple-vars"),require("postcss-nested"),require("postcss-hexrgba"),require("autoprefixer")
];

class RunAfterCompile {
  apply(compiler) {
    compiler.hooks.done.tap("copy images",function () {
      fse.copySync("./app/assets/images","./docs/assets/images");
    });
  }
}

let cssConfig = {
  test: /\.css$/i,use: [
    "css-loader?url=false",{ loader: "postcss-loader",options: { plugins: postCssplugins } }
  ]
};

let pages = fse
  .readdirsync("./app")
  .filter(function (file) {
    return file.endsWith(".html");
  })
  .map(function (page) {
    return new HtmlWebpackPlugin({
      filename: page,template: `./app/${page}`
    });
  });

let config = {
  entry: "./app/assets/scripts/App.js",plugins: pages,module: {
    rules: [
      cssConfig,{
        test: /\.js$/,exclude: /(node_modules)/,use: {
          loader: "babel-loader",options: {
            presets: ["@babel/preset-react","@babel/preset-env"],plugins: ["@babel/plugin-transform-runtime"]
          }
        }
      }
    ]
  }
};

if (currentTask == "dev") {
  cssConfig.use.unshift("style-loader");
  config.output = {
    filename: "bundled.js",path: path.resolve(__dirname,"app")
  };
  config.devServer = {
    before: function (app,server) {
      server._watch("./app/**/*.html");
    },contentBase: path.join(__dirname,"app"),hot: true,port: 3000,host: "0.0.0.0",historyApiFallback: { index: "/" }
  };
  config.mode = "development";
}

if (currentTask == "build") {
  cssConfig.use.unshift(MiniCssExtractPlugin.loader);
  postCssplugins.push(require("cssnano"));
  config.output = {
    filename: "[name].[chunkhash].js",chunkFilename: "[name].[chunkhash].js","docs")
  };
  config.mode = "production";
  config.optimization = {
    splitChunks: { chunks: "all" }
  };
  config.plugins.push(
    new CleanWebpackPlugin(),new MiniCssExtractPlugin({ filename: "styles.[chunkhash].css" }),new RunAfterCompile()
  );
}

module.exports = config;

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

谢谢

解决方法

有一个专门针对这种情况的dotenv-webpack插件。

设置非常简单：

// webpack.config.js
const dotEnv = require('dotenv-webpack')
module.exports = {
  plugins: [new dotEnv()]
}

Docs

编辑

这个答案太冗长，无法发表评论：

您正在将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()]
}
,

在要使用环境变量的文件顶部添加：

import dotenv from 'dotenv';

dotenv.config();

一切正常：p

关于fs模块的错误，您是否尝试向Webpack配置中添加以下代码段？

node: {
  fs: 'empty'
}
,

我建议使用 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());

...

,

def simple_middleware(get_response): def middleware(request): response = get_response(request) if request.method == "OPTIONS": response.status_code = 200 return response return middleware 变量将仅在 webpack 中可用，而 dotenv 用于未由 webpack 编译的内容。

为了使您的环境变量在 webpack 编译文件中可用，您需要使用 webpack 的定义或环境插件注入它。

https://webpack.js.org/plugins/environment-plugin/

这将在编译过程中用环境变量替换文件中的所有环境字符串。

您的密钥给出 undefined 的原因是，当 webpack (babel) 编译它时，该字符串不存在，因为它从未通过 webpack 环境变量替换/注入。

dotenvjavascriptreactjsreactjsreactjsreactjswebpackwebpackwebpack