mirror of
				https://github.com/valentineus/popov.link.git
				synced 2025-11-04 14:59:45 +03:00 
			
		
		
		
	Added a new post about ElectronJS reload
Signed-off-by: Valentin Popov <info@valentineus.link>
This commit is contained in:
		
							
								
								
									
										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
 | 
			
		||||
		Reference in New Issue
	
	Block a user