Как использовать живую перезагрузку в вашем электронном проекте

Многие веб-разработчики, работающие с такими фреймворками, как ReactJS или Angular, стремятся реализовать такой пакет, как Webpack, который включает в себя множество утилит, чтобы сделать процесс разработки более плавным и быстрым. Одной из наиболее полезных функций Webpack является возможность горячей перезагрузки, которая обновляет файл, который был изменен в вашем проекте, без обновления всего состояния вашего приложения, кроме того, которое изменилось.

Хотя горячая перезагрузка для Electron пока недоступна, вы можете реализовать функцию прямой перезагрузки, используя модуль с открытым исходным кодом. Оперативная перезагрузка перезагружает или обновляет все приложение при изменении файла. Так, например, если вы использовали какой-то динамический элемент навигации (например, список с JavaScript) и находитесь на какой-то его вкладке и решили внести изменения в код JS, то при перезагрузке в режиме реального времени приложение перезапустится и загрузится обратно в приложение. начальный элемент на вашем элементе навигации.

1. Установите электронно-перезарядку

Electron Reload — это самый простой способ загрузить содержимое всех активных окон браузера в электронном хранилище при изменении исходных файлов. Таким образом, он реализует функцию перезагрузки в вашем проекте. Чтобы установить этот модуль в свой электронный проект, переключитесь на своем терминале в каталог своего электронного проекта и выполните следующую команду:

npm install electron-reload

Большинство других решений для достижения оперативной перезагрузки слишком сложны и требуют времени для реализации, например, для реализации HTTP-сервера, затем для настройки сокетов и т. Д. Слишком много материала для «простой задачи». Для получения дополнительной информации об этой библиотеке, пожалуйста, посетите официальный репозиторий на Github здесь.

A. Внедрите живую перезагрузку для вашего контента

Если вы не модифицируете JavaScript, который обрабатывает Electron, а только свой собственный код (внешний интерфейс), тогда будет достаточно перезагрузить ваш контент. Все, что вам нужно, это требовать electron-reload Модуль с указанием пути к папке вашего проекта, в которой после изменения файла будет запущена перезагрузка. С проектом по умолчанию, вы можете сделать это на вашем main.js файл после электронного модуля требуется:

const electron = require('electron')
// Enable live reload for all the files inside your project directory
require('electron-reload')(__dirname);

Этого должно быть достаточно для большинства случаев. Однако предыдущий код обновляет только веб-содержимое всех браузерных окон. Поэтому, если вы хотите сделать полный сброс (что означает запуск нового электронного процесса), проверьте следующий шаг.

B. Осуществить живую перезагрузку для электрона и контента

Если вы хотите выполнить полный сброс (запуск нового электронного процесса), вы можете просто передать путь к исполняемому электрону в объекте параметров. Например, если у вас уже есть электрон, вы можете просто сделать в своем main.js файл:

const electron = require('electron')
// Enable live reload for Electron too
require('electron-reload')(__dirname, {
// Note that the path to electron may vary according to the main file
electron: require(`${__dirname}/node_modules/electron`)
});

И когда вы вносите изменения в файлы JS, которые обрабатывают код Electron или ваш код веб-интерфейса, приложение будет перезагружено (полная перезагрузка только в том случае, если используется код Electron).