首頁猿問將 dotenv 與 react...

將 dotenv 與 react 和 webpack 結合使用

JavaScript

鳳凰求蠱 2023-06-09 10:28:37

我正在查找可以將 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。我已經在這里待了幾個小時了，但我似乎無法在網上找到我需要的東西。希望之前有人遇到過這個問題。

查看完整描述

4 回答

斯蒂芬大帝

TA貢獻1827條經驗獲得超8個贊

有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()]

}

反對回復 2023-06-09

HUX布斯

TA貢獻1876條經驗獲得超6個贊

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

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

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

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

反對回復 2023-06-09

慕仙森

TA貢獻1827條經驗獲得超8個贊

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

import dotenv from 'dotenv';

dotenv.config();

一切都應該正常工作：p

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

node: {

fs: 'empty'

}

反對回復 2023-06-09

慕沐林林

TA貢獻2016條經驗獲得超9個贊

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

...

反對回復 2023-06-09

4 回答
0 關注
333 瀏覽

關注

添加回答

舉報

0/150

提交

取消

亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

熱搜

最近搜索清空

將 dotenv 與 react 和 webpack 結合使用

將 dotenv 與 react 和 webpack 結合使用

4 回答

添加回答