环境变量在 Electron 中未定义，即使它已在 webpack.DefinePlugin 中设置

我有一个要求，我们需要根据它是在生产环境还是在开发环境中执行来设置 dll 路径。因此，我决定将该值放入环境变量中，并尝试使用 webpack.DefinePlugin({}) 来实现。

方法一：

webpack.config.json

plugins: [
new webpack.DefinePlugin({
    'process.env.NODE_ENV' : JSON.stringify('production')
})

然后我尝试在电子的主进程中获取该值，在我的例子中是 elec.js

elec.js

const Electron = require("electron");
const app = require("electron");

var dllPath = "";

function createWindow() {
  let win = new BrowserWindow({
    width: 800,
    height: 600,
    title: "Test",
    icon: "Test.ico"
  });

  win.setMenu(null);

  win.loadURL(
    url.format({
      pathname: path.join(__dirname, "../renderer/index.html"),
      protocol: "file:",
      slashes: true
    })
  );

if (process.env.NODE_ENV ==='production') {
    dllPath = path.join(
      __dirname,
      "./../../dll/test.dll"
    );
  } else {
    dllPath = path.join(
      __dirname,
      "./../../../dll/test.dll"
    );
  }
}

app.on("ready", createWindow);

但问题是，当我尝试在 createWindow() 函数中访问该值时，它是未定义的，因此流程总是转到 else 块。

我有什么遗漏的吗？

方法二：

我尝试使用跨环境节点包来实现相同的目的，但没有成功。请找到下面的代码块，我尝试使用跨环境。

包.json

 "scripts": {
          "build": "cross-env process.env.NODE_ENV=production && rimraf ./dist/ && webpack --progress && node-sass 
           ./src/renderer/scss/ -o ./dist/renderer/ && rimraf ./dist/renderer/includes/"
    }

问题是多方面的。

首先，你的elec.js在应用程序加载之前由 Electron 执行。 Electron 运行 elec.js，它创建浏览器窗口 (let win = new BrowserWindow(...)）并加载 HTML 文件（win.loadURL(...)）进入浏览器进程内，然后 HTML 加载 webpack 的 js。所以 elec.js 中没有任何 webpacked js 代码可用。 webpack 代码也在 elec.js 之外的另一个进程中运行。

另一件需要注意的事情是 webpack 插件也不会为它指向的变量创建任何赋值。它是通过简单的文本搜索和替换来完成的，在您的示例中，process.env.NODE_ENV 的所有实例都将替换为 webpack 源代码中的“生产”字符串。这不是太明显，但却扰乱了预期的结果。

最后一件事 - webpack 插件不会更改 elec.js 文件中的任何代码，因为该文件不是 webpack 的。

因此，所有这些都使得 build/webpack 时的 process.env.NODE_ENV 在 elec.js 代码中不可用。

一旦机制明确，解决问题的方法就很少了，我将给出一般想法，因为每个想法都有很多讨论，并且根据情况和所需的用例，有些方法比其他方法更好：

1. 在构建过程中根据环境变量生成一个具有必要分配的 js 文件（例如复制 env-prod.js / env-dev.js -> env.js 之一），将其复制到 elec.js 旁边，并引用它（require(env.js)）在 elec.js 中。

2. 从命令行传递环境变量（例如NODE_ENV=1 electron .) - 它将到达 elec.js。

3. 根据环境变量将文件包含到 webpack 中（例如复制 env-prod.js / env-dev.js -> env.js 之一）并从 elec.js 中查看 webpacked 文件，例如使用asar命令。

4. 根据构建在 package.json 中使用不同的版本（例如版本：“1.0.0-DEBUG”用于调试），并通过在 elec.js 中调用 app.getVersion() 来读取和解析它。这很棘手，因为 package.json 应该是单个文件，但可以使用操作系统命令（例如在“脚本”中）在调用 npm 之前复制准备好的 package.json 文件之一。

以下是一些也可能有帮助的链接：

电子问题#7714 https://github.com/electron/electron/issues/7714- Electron中相关特性的讨论

电子即开发 https://github.com/sindresorhus/electron-is-dev- 模块检查它是否在开发中

电子样板 https://github.com/szwacz/electron-boilerplate- 使用 config/env-prod/dev 文件的示例样板