sử dụng dotenv với react & webpack

Question

Tôi đang tìm thông tin mà bạn có thể sử dụng dotenv với phản ứng bằng cách sử dụng

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

tuy nhiên khi tôi tạo .envtệp của mình trong thư mục gốc của tôi, tôi nhận được một undefinedthông báo trong bảng điều khiển.

Tôi nên lưu ý rằng tôi KHÔNG sử dụng ứng dụng react-create-app.

Đây là .envtệp của tôi

REACT_APP_API_KEY=secretKey

Đây là tệp cấu hình webpack của tôi.

Có cách nào tôi có thể sử dụng dotenv mà không cần sử dụng node.js và tạo một máy chủ nhỏ không.

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;

Tôi đã ở đây vài giờ và dường như tôi không thể tìm thấy những gì tôi cần trực tuyến. Hy vọng ai đó đã gặp phải vấn đề này trước đây.

cảm ơn

Answer 1

Có một dotenv-webpackplugin dành riêng cho tình huống này.

Thiết lập rất đơn giản:

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

Docs

BIÊN TẬP

Câu trả lời này quá dài dòng cho các nhận xét:

Bạn đang thêm dotEnvvào thuộc tính sai 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"]
          }
        }
      }
    ]
  }

Khi nào nó nên được thêm vào đây:

if (currentTask == "dev") {
  config.plugins = [/* RIGHT */ new dotEnv()]
}

Answer 2

ở đầu tệp của bạn, nơi bạn muốn sử dụng biến env, hãy thêm:

import dotenv from 'dotenv';

dotenv.config();

mọi thứ sẽ hoạt động tốt: p

Liên quan đến lỗi của bạn với mô-đun fs, bạn có thử thêm đoạn mã sau vào cấu hình webpack của mình không?

node: {
  fs: 'empty'
}