访问javascript文件中的节点环境变量答案

【问题标题】：Access node env variable in javascript file访问javascript文件中的节点环境变量
【发布时间】：2023-03-14 01:10:01
【问题描述】：

我在 json 包中的start 命令中设置env 变量，如下所示

package.json

"scripts": {
    "start": "webpack-dev-server --config ./webpack.config.config.dev.js --env.mode=dev --port 4200"
  },

然后我尝试使用process 访问这个env 变量，但显然它不起作用。

scripts.js

   let url = process.env.mode == 'dev' ? 'local-url' : 'url';

我遇到以下错误：

scripts.js:3 Uncaught ReferenceError: process is not defined

我已尝试添加具有以下内容的.eslintrc.json 文件，但没有成功

{
    "env": {
        "node": true,
        "commonjs": true
    },
    "extends": "eslint:recommended"
}

我不确定这是否是在 javascript 文件中识别环境和访问 env 变量的正确方法，请提出建议。谢谢

【问题讨论】：

【解决方案1】：

首先创建 .env 文件来存储你的变量。

基本上在作为入口点的顶层文件中添加：

// commmon modules
require('dotenv').config()

// ES modules
import dotenv from 'dotenv';
dotenv.config()

之后，您将可以使用 process.env 访问所有变量

【讨论】：

我尝试安装 dotenv 包并运行我的应用程序，但出现以下错误：ERROR in ./node_modules/dotenv/lib/main.js [config] Module not found: Error: Can't resolve 'fs' in 'C:\.....\node_modules\dotenv\lib'

【解决方案2】：

使用webpack.DefinePlugin() 将您的环境变量导出到您的构建中，并使其值可用于您的客户端脚本。

在您的 Webpack 配置文件中，您应该有一个 plugins 数组（如果没有，只需将其添加到配置对象中）。在plugins 数组中添加以下内容：

new webpack.DefinePlugin({
  'process.env.mode': JSON.stringify(process.env.mode)
});

当 Webpack 构建您的客户端脚本时，它现在会将所有出现的 process.env.mode 替换为实际值，以便在客户端中运行脚本时按预期工作。

如果您需要更多环境变量或任何其他可用于客户端运行时的构建时常量，只需将它们添加到您传递给DefinePlugin 构造函数的对象中。只需确保正确命名它们以避免与您可能在客户端脚本中声明的变量发生冲突，因为这可能会搞砸事情。

【讨论】：

但我的问题是，我无法在 js fly 中使用 process 变量本身。
@AshokDamani 这将为您的用例解决这个问题。 process 本身在您的客户端脚本中不可用，因为客户端脚本在完全不同的环境中运行。在构建时，您必须导出所需的东西。这就是我提供的代码的作用。
它对我不起作用，我已经添加了您提到的 DefinePlugin，并尝试使用我的客户端 js 文件中的进程访问 env 变量，但得到相同的错误：process is not defined
似乎 DefinePlugin 没有为我注入变量。
@AshokDamani 您可以编辑问题并添加您所做的更改吗？它应该可以工作，所以显然缺少一些东西，但我需要看到它才能提供帮助。