將 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。

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",
    path: path.resolve(__dirname, "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;

我已經在這里呆了幾個小時了，我似乎無法在網上找到我需要的東西。 希望之前有人遇到過這個問題。

謝謝

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

在您要使用環境變量的文件頂部添加：

import dotenv from 'dotenv';

dotenv.config();

一切正常：p

關於 fs 模塊的錯誤，您是否嘗試將以下代碼段添加到您的 webpack 配置中？

node: {
  fs: 'empty'
}

Answer 3

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

Answer 4

dotenv變量僅在 webpack 中可用，並且process webpack 未編譯的內容。

為了使您的環境變量在 webpack 編譯文件中可用，您需要使用 webpack 的定義或環境插件注入它。

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

這將在編譯過程中用環境變量替換文件中的所有環境字符串。

您的密鑰給出 undefined 的原因是，當 webpack (babel) 編譯它時，該字符串不存在，因為它從未通過 webpack 環境變量替換/注入。