mirror of
				https://github.com/valentineus/popov.link.git
				synced 2025-11-04 06:49: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