diff options
| -rw-r--r-- | _posts/2019-08-15-electron-reload.md | 66 |
1 files changed, 66 insertions, 0 deletions
diff --git a/_posts/2019-08-15-electron-reload.md b/_posts/2019-08-15-electron-reload.md new file mode 100644 index 0000000..78ac36b --- /dev/null +++ b/_posts/2019-08-15-electron-reload.md @@ -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 |