Added a new post about ElectronJS reload
Signed-off-by: Valentin Popov <info@valentineus.link>
This commit is contained in:
parent
8ecf890fa1
commit
07cc55afb7
66
_posts/2019-08-15-electron-reload.md
Normal file
66
_posts/2019-08-15-electron-reload.md
Normal file
@ -0,0 +1,66 @@
|
|||||||
|
---
|
||||||
|
description: "Способы и варианты горячей перезагрузки ElectronJS приложения."
|
||||||
|
title: "Перезагрузка ElectronJS приложения"
|
||||||
|
layout: post
|
||||||
|
---
|
||||||
|
|
||||||
|
## Main процесс
|
||||||
|
|
||||||
|
Для перезагрузки основного процесса можно использовать готовый пакет [electron-reload].
|
||||||
|
Или перезагружать приложение средствами пакета [electron-webpack].
|
||||||
|
|
||||||
|
Если сборщик кода отличный от WebPack или нет возможности использовать вышеуказанные пакеты, можно обойтись инструментом [nodemon].
|
||||||
|
Команда запуска будет выглядеть следующим образом:
|
||||||
|
|
||||||
|
```bash
|
||||||
|
nodemon --watch ./assets/main.js --exec 'electron .'
|
||||||
|
```
|
||||||
|
|
||||||
|
Приложение будет автоматически перезапускаться при модификациях указанного файла.
|
||||||
|
|
||||||
|
## Renderer процесс
|
||||||
|
|
||||||
|
Для обновления renderer процесса, перезагружать полностью приложение нет необходимости.
|
||||||
|
Достаточно обновить страницу.
|
||||||
|
Самый простой способ, горячие клавиши: `Ctrl` + `F5`.
|
||||||
|
Так как рендер процесс по своей сути является обычным окном браузера, можно настроить [HMR] технологию.
|
||||||
|
Конечно, если используются соответствующие инструменты.
|
||||||
|
|
||||||
|
Мне симпатичен способ использования пакета [electron-reload].
|
||||||
|
В алгоритме пакета лежит простое слежение за каталогом файлов и обновление активных окон приложения.
|
||||||
|
|
||||||
|
Но мною была найдена досадная [проблема], не позволяющая использовать версии `1.5.0` и `1.4.1` со сборщиком WebPack, который используется в проекте.
|
||||||
|
|
||||||
|
Решение было продублировать основной функционал пакета в проекте:
|
||||||
|
|
||||||
|
```javascript
|
||||||
|
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();
|
||||||
|
});
|
||||||
|
});
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
[HMR]: https://webpack.js.org/concepts/hot-module-replacement/
|
||||||
|
[electron-reload]: https://www.npmjs.com/package/electron-reload
|
||||||
|
[electron-webpack]: https://www.npmjs.com/package/electron-webpack
|
||||||
|
[nodemon]: https://www.npmjs.com/package/nodemon
|
||||||
|
[проблема]: https://github.com/yan-foto/electron-reload/issues/66
|
Loading…
x
Reference in New Issue
Block a user