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

Question

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

方法一:

webpack.config.json

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

然后我尝试在 Electron 的主进程中获取该值，在我的例子中为 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 block 。

我有什么遗漏的吗？

方法2:

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

package.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/"
    }

Answer 1

问题是多方面的。

首先，您的 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 处理。

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

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

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

2. 从命令行传递环境变量(例如 NODE_ENV=1 electro 。) - 它将到达 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 文件之一。

这里有一些也可以提供帮助的链接:

Electron issue #7714 - Electron中相关特性的讨论

electron-is-dev - 模块检查是否在开发中

Electron boilerplate - 使用 config/env-prod/dev 文件的示例样板