問題描述

我有一個要求，我們需要根據它是在生產環境中還是在開發環境中執行來設置 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({}).

方法一:

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() 函數中訪問該值時，它是未定義的，因此流程總是轉到 else 塊.

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

我有什么遺漏嗎?

方法二:

我嘗試使用跨環境節點包來實現相同的目標，但沒有運氣.請在下面找到我嘗試使用 cross-env 的代碼塊.

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

推薦答案

iva2k 提供的洞察力使我能夠為同樣的問題找到解決方案.

The insight provided by iva2k is what allowed me to come to a solution for this same problem.

使用 dotenv 為我的配置創建一個 .env 文件我到了我想去的地方的一半(設置一些環境變量以在生產環境中使用).然后問題就變成了 Electron 默認沒有將那些從 Main 進程傳遞到 Renderer 進程.

Using dotenv to create a .env file for my config got me halfway to where I wanted to be (setting up a few environment variables for use in a production setting). The problem then became that Electron wasn't passing those from the Main process down to the Renderer process by default.

解決方法很簡單:使用 Electron 自己的 ipcMain 和 ipcRenderer 模塊在兩者之間傳遞 dotenv 對象.

The work-around is simple: use Electron's own ipcMain and ipcRenderer modules to pass the dotenv object between the two.

在您的主文件(例如您的 elec.js 文件)中，在需要模塊后放置一個 ipcMain 事件監聽器:

In your main file (e.g. your elec.js file), place an ipcMain event listener after requiring the module:

const config = require('dotenv').config();
const electron = require('electron');
const { app, BrowserWindow, ipcMain } = electron;

...

ipcMain.on('get-env', (event) => {
    event.sender.send('get-env-reply', config);
});

在應用程序的渲染端，將其放置在任何需要的地方:

Elsewhere, in your application's rendering-side, place this anywhere necessary:

async function getConfig() 
{
    const { ipcRenderer } = window.require('electron');
    let config = null;
    ipcRenderer.on('get-env-reply', (event, arg) => {
        // The dotenv config object should return an object with
        // another object inside caled "parsed". Change this if need be.
        config = arg.parsed;
    });
    ipcRenderer.send('get-env');

    return config;
}

這基本上允許我在主進程文件中聲明一個事件，然后在我想要的任何進程端文件中重新使用它，從而允許我在與構建一起的文件中混淆配置變量，但不是如果不打開開發工具，最終用戶將無法訪問.

This basically allowed me to declare one event in the Main process file, and then re-use it in any process-side file I wanted, thus allowing me to obfuscate config variables in a file that goes with the build, but isn't accessible to end-users without opening up the dev-tools.

這篇關于即使在 webpack.DefinePlugin 中設置了環境變量，也沒有在電子中定義的文章就介紹到這了，希望我們推薦的答案對大家有所幫助，也希望大家多多支持html5模板網！