即使已在webpack中设置环境变量，电子中也未定义环境变量。 [英] Environment variable is undefined in electron even it has been set inside webpack.DefinePlugin

问题描述

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

I have a requirement where we need to set dll path based upon whether it is executing in production or in development environment. So I decided to place that value in environment variable and tried to achieve that using webpack.DefinePlugin({}).

方法1：

webpack.config.json

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

然后我试图在电子的主要过程中获得该值，以我的情况为例elec.js

And then I tried to get that value in electron's main process, In my case 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（）函数中访问该值时，它是未定义的，因此流程总是转到其他块。

But problem is that when I try to access that value in createWindow() function it is undefined so flow always goes to else block.

我缺少什么吗？

方法2：

我尝试使用跨环境节点程序包实现相同的功能，但是没有运气。请在下面的代码块中尝试使用交叉环境。

I tried to achieve the same using cross-env node package, but no luck. Please find below code block which I tried using cross-env.

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

推荐答案

问题是多方面的。

首先，您的 elec.js 在加载应用程序之前由Electron执行。 Electron运行elec.js，这将创建浏览器窗口（ let win = new BrowserWindow（...））并加载HTML文件（ win.loadURL （...））放入浏览器进程中，然后HTML将加载您的webpack脚本。因此，elec.js中没有可用的webpacked js代码。该webpack的代码还运行在除elec.js之外的其他进程中。

First, your elec.js is executed by Electron before the app is loaded. Electron runs elec.js, which creates the Browser window (let win = new BrowserWindow(...)) and loads HTML file (win.loadURL(...)) into it inside the browser process, the HTML then loads your webpack'ed js. So none of the webpacked js code is available in the elec.js. The webpack'ed code is also running in another process than the elec.js.

需要注意的另一件事是，webpack插件不会为其指向的变量创建任何赋值太。这是通过简单的文本搜索完成的，并替换为例（在您的示例中，process.env.NODE_ENV的所有实例都将被打包为webpack的源代码中的 production字符串替换）。

Another thing to note is that webpack plugin does not create any assignment to the variable it points too. It is done by simple text search and replace, in your example, all instances of process.env.NODE_ENV will be replaced with "production" string in the source code that is webpack'ed. That is not too obvious, but messes up the expected results.

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

One last thing - webpack plugin does not change any code in elec.js file, as that file is not webpack'ed.

所以所有这些使得从build / webpack时间开始的process.env.NODE_ENV在elec.js代码中不可用。

So all that makes process.env.NODE_ENV from the build/webpack time not available in the elec.js code.

一旦机制明确，解决问题的方法就很少了，我将给出笼统的想法，因为每种方法都有很多讨论，并且取决于情况和所需的用例，有些更好

Once the mechanisms are clear, there are few ways to solve the problem, I will give general ideas, as there are plenty of discussions on each, and depending on circumstances and desired use case, some are better than others:

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

从命令行传递环境变量（例如 NODE_ENV = 1电子。）-它将进入elec.js。

Pass environment variable from command line (e.g. NODE_ENV=1 electron .) - it will get to elec.js.

将文件包含到基于webpack的文件中关于环境变量（例如复制env-prod.js / env-dev.js-> env.js）之一，然后从elec.js窥视到webpacked文件中，例如使用 asar 命令。

Include a file into webpack based on environment variable (e.g. copy one of env-prod.js / env-dev.js -> env.js) and peek into webpacked' files from elec.js, e.g. using asar commands.

在package.json中使用不同版本，具体取决于版本（例如，版本： 1.0.0-DEBUG（用于调试），并读取&通过在elec.js中调用app.getVersion（）对其进行解析。这很棘手，因为package.json应该是单个文件，但是可以在调用npm之前使用OS命令（例如，在脚本中）复制准备好的package.json文件之一。

Use different version in package.json depending on build (e.g. version: "1.0.0-DEBUG" for debug), and read & parse it by calling app.getVersion() in elec.js. It is tricky as package.json should be a single file, but OS commands could be used (e.g. in "scripts") to copy one of prepared package.json files before invoking npm.

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

Here are some links that could help too:

电子问题＃7714 -关于电子的相关功能的讨论

Electron issue #7714 - discussion on relevant features in Electron

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

electron-is-dev - module checking if it is in dev

电子样板-使用config / env-prod的示例样板/ dev文件

Electron boilerplate - example boilerplate that uses config/env-prod/dev files

这篇关于即使已在webpack中设置环境变量，电子中也未定义环境变量。的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！