popov.link/_posts/2019-08-15-electron-reload.md

description	title	layout
Руководство по автоматической перезагрузке приложений на Electron с помощью пакетов electron-reload и electron-webpack. Обход проблем с совместимостью и использование HMR для renderer процесса.	Горячая перезагрузка ElectronJS приложения	post

Main процесс

Для перезагрузки основного процесса можно использовать готовый пакет electron-reload. Или перезагружать приложение средствами пакета electron-webpack.

Если сборщик кода отличный от WebPack или нет возможности использовать вышеуказанные пакеты, можно обойтись инструментом nodemon. Команда запуска будет выглядеть следующим образом:

nodemon --watch ./assets/main.js --exec 'electron .'

Приложение будет автоматически перезапускаться при модификациях указанного файла.

Renderer процесс

Для обновления renderer процесса, перезагружать полностью приложение нет необходимости. Достаточно обновить страницу. Самый простой способ, горячие клавиши: Ctrl + F5. Так как рендер процесс по своей сути является обычным окном браузера, можно настроить HMR технологию. Конечно, если используются соответствующие инструменты.

Мне симпатичен способ использования пакета electron-reload. В алгоритме пакета лежит простое слежение за каталогом файлов и обновление активных окон приложения.

Но мною была найдена досадная проблема, не позволяющая использовать версии 1.5.0 и 1.4.1 со сборщиком WebPack, который используется в проекте.

Решение было продублировать основной функционал пакета в проекте:

import { app } from 'electron';
import chokidar from 'chokidar';

const browserWindows = [];

app.on('browser-window-created', (event, window) => {
    browserWindows.push(window);

    window.on('closed', () => {
        const index = browserWindows.indexOf(window);
        browserWindows.splice(index, 1);
    });
});

if (process.env.NODE_ENV !== 'production') {
    const watcher = chokidar.watch(__dirname, { ignored: [/node_modules|[/\\]\./] });

    watcher.on('change', () => {
        browserWindows.forEach(window => {
            window.webContents.reloadIgnoringCache();
        });
    });
}