Проблема с переменными окружения в сборке Electron с использованием Electron-Vite и Electron-Builder

Вопрос или проблема

"electron:dev-mock": "concurrently -k \"npm run electron:dev\" \"npm run mock-server\"",
"electron:prod": "electron-vite dev --mode production",
"electron:preview": "electron-vite preview",
"electron:prebuild": "electron-vite build",
"electron:build": "dotenv -e .env.build -- npx electron-vite build && dotenv -e .env.build -- npx electron-builder -w"

import { app, shell, BrowserWindow } from "electron";
import { electronApp, optimizer, is } from "@electron-toolkit/utils";
import { join } from "path";

function createWindow(): void {
  const mainWindow = new BrowserWindow({
    width: 1280,
    height: 720,
    show: false,
    autoHideMenuBar: true,
    webPreferences: {
      preload: join(__dirname, "../preload/preload.mjs"),
      sandbox: false,
    },
  });

  mainWindow.on("ready-to-show", () => {
    mainWindow.maximize();
    mainWindow.show();
  });

  mainWindow.webContents.setWindowOpenHandler((details) => {
    void shell.openExternal(details.url);
    return { action: "deny" };
  });

  const loadURL = async () => {
    try {
      if (is.dev && process.env["ELECTRON_RENDERER_URL"]) {
        await mainWindow.loadURL(process.env["ELECTRON_RENDERER_URL"]);
      } else {
        await mainWindow.loadFile(join(__dirname, "../renderer/index.html"));
      }
    } catch (error) {
      console.error("Не удалось загрузить URL:", error);
    }
  };

  void loadURL();
}

void app.whenReady().then(() => {
  electronApp.setAppUserModelId("com.canopybiosciences");
  app.on("browser-window-created", (_, window) => {
    optimizer.watchWindowShortcuts(window);
  });

  createWindow();

  app.on("activate", function () {
    if (BrowserWindow.getAllWindows().length === 0) createWindow();
  });
});

app.on("window-all-closed", () => {
  if (process.platform !== "darwin") {
    app.quit();
  }
});

Ответ или решение

Проблема с переменными окружения в сборке Electron с использованием Electron-Vite и Electron-Builder

При разработке десктопного приложения на Windows с использованием React и ViteJS в сочетании с Electron, нередко возникают трудности при работе с переменными окружения. В данной статье мы подробно рассмотрим проблему, с которой вы столкнулись, когда переменные из файла .env.build не подхватываются при сборке приложения с использованием electron-builder.

Описание проблемы

Вы имеете три файла окружения:

• .env.development — для режима разработки.
• .env.production — для производственной сборки.
• .env.build — для процесса сборки.

Переменные окружения из первых двух файлов успешно работают, но переменные из .env.build не распознаются во время финальной сборки. Давайте подробнее рассмотрим настройки, скрипты и код, с которыми вы работаете, чтобы выявить возможные причины проблемы.

Анализ используемых скриптов

Ваши скрипты для сборки выглядят следующим образом:

"electron:build": "dotenv -e .env.build -- npx electron-vite build && dotenv -e .env.build -- npx electron-builder -w"

Эти команды используют библиотеку dotenv для загрузки переменных окружения из .env.build. Обратите внимание, что вы сначала выполняете electron-vite build, а затем electron-builder. Следовательно, переменные окружения должны быть доступны на этапе сборки. Однако возможны несколько причин, по которым они не подхватываются.

Возможные решения

1. Проверка синтаксиса .env.build: Убедитесь, что переменные в вашем .env.build файле правильно определены. Каждая переменная должна быть в формате KEY=VALUE и не содержать лишних пробелов.

2. Обработка переменных окружения в Electron: Убедитесь, что вы корректно передаете переменные окружения в ваш код. Попробуйте вывести некоторые переменные на консоль непосредственно в electron/main.ts для диагностики:

   console.log("Проверка переменных окружения:", process.env);

   Это позволит вам определить, видит ли приложение переменные окружения из .env.build.

3. Порядок выполнения скриптов: Возможно, проблема заключается в том, что electron-vite build выполняется до того, как переменные окружения загружены. Попробуйте объединить команды в один вызов:

   "electron:build": "dotenv -e .env.build -- bash -c 'npx electron-vite build && npx electron-builder -w'"

4. Возможности Electron-Builder: Убедитесь, что ваши конфигурации electron-builder также правильно настроены для доступа к переменным окружения. Обратите внимание на параметр env в конфигурации build (в package.json):

   "build": {
     "env": {
       "YOUR_ENV_VARIABLE": "value"
     }
   }

5. Тестирование с dotenv в других скриптах: Проверьте, работает ли dotenv в других средах или скриптах. Это может помочь выявить, действительно ли проблема связана с electron-builder, или это более общая проблема с загрузкой переменных окружения.

Заключение

Решение проблем с переменными окружения в Electron может быть сложной задачей, особенно когда используются различные инструменты, такие как Electron-Vite и Electron-Builder. Проверяйте корректность ваших файлов .env, порядок выполнения команд, и настройки вашей сборки. Использование логирования поможет вам быстро идентифицировать источник проблемы.

Если проблема сохраняется несмотря на выполненные рекомендации, рассмотрите возможность создания минимального воспроизводимого примера, который можно будет легко протестировать и отладить. Это значительно упростит диагностику и позволит сообществу оказать вам более детальную помощь.