Настройка React с Electron

Настройка React с Electron начинается с создания проекта React на Vite, после чего в devDependencies добавляются electron и electron-builder. В итоге в проекте появляются две точки входа: приложение Vite для процесса визуализации и файл main.js для главного процесса Electron.

main.js — это точка входа Electron. Он создаёт BrowserWindow с нужными размерами окна и настройками безопасности, а затем загружает приложение React: во время разработки — по адресу localhost:5173, а в рабочем окружении — из собранного файла.

electron-vite — это универсальный инструмент сборки, который объединяет Vite с Electron и автоматически обрабатывает сложную конфигурацию сборки для нескольких процессов. Он предоставляет отдельные конфигурации Vite для главного процесса, скрипта предварительной загрузки и процесса визуализации, значительно упрощая сборки для разработки и рабочего окружения.

При настройке Vite для Electron необходимо явно задавать целевые версии браузера, а не полагаться на автоматическое определение, поскольку процесс визуализации работает в конкретной версии Chromium, встроенной в Electron. electron-vite делает это автоматически, но при ручной настройке необходимо указать версию chrome в целевой конфигурации сборки.

Запуск electron-vite dev одновременно запускает сервер разработки Vite для процесса визуализации и главный процесс Electron. Сервер разработки Vite предоставляет горячую замену модулей (HMR), поэтому изменения в компонентах React мгновенно появляются в окне Electron без полного перезапуска.

HMR работает в процессе визуализации Electron так же, как в браузере: изменённые компоненты мгновенно отображаются, а их состояние сохраняется. Только изменения в main.js или скрипте предварительной загрузки требуют полного перезапуска Electron, поскольку эти файлы работают за пределами области действия HMR Vite.

Проектам Electron + React + TypeScript нужны отдельные файлы конфигурации tsconfig для главного процесса (с целью Node.js/CommonJS), скрипта предварительной загрузки (с целью браузероподобного окружения с глобальными объектами Node) и процесса визуализации (стандартный TypeScript для браузера). electron-vite автоматически создаёт эти конфигурации.

Скрипт предварительной загрузки использует contextBridge.exposeInMainWorld, чтобы предоставить процессу визуализации ваш пользовательский API. Обычно предоставляется пространство имён вроде "api" с функциями, оборачивающими вызовы ipcRenderer.invoke, благодаря чему компоненты React получают простой асинхронный интерфейс для операций главного процесса.

Из любого компонента React вызывайте window.api.myFunction(), чтобы обратиться к предоставленному API скрипта предварительной загрузки. Пользователи TypeScript обычно добавляют глобальное объявление (window: Window & { api: MyAPI }), чтобы получить проверку типов и автодополнение для предоставленного интерфейса.

electron-vite build компилирует все три целевых компонента (главный процесс, скрипт предварительной загрузки и процесс визуализации) в папку dist/. Затем electron-builder упаковывает их в установщик для конкретной платформы. В рабочем окружении main.js загружает процесс визуализации из собранного файла, а не по URL сервера разработки.

Самые частые ошибки при настройке: забыть указать nodeIntegration:false и contextIsolation:true, что создаёт уязвимости; загрузить неправильный URL в main.js, перепутав режим разработки и рабочий режим; напрямую импортировать модули Electron в процессе визуализации, что приводит к сбоям. Значения по умолчанию electron-vite предотвращают большинство этих проблем.

Что даёт запуск electron-vite dev?

Настройка React с Electron упрощается благодаря electron-vite, который берёт на себя сложность сборки для нескольких процессов. Процесс разработки предоставляет полную поддержку HMR, contextBridge защищает поверхность API процесса визуализации, а отдельные конфигурации TypeScript обеспечивают правильное типовое окружение для каждого процесса. Для сборки рабочего приложения используется electron-builder, создающий пакет для конкретной платформы.