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

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

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

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

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

npm install electron-reload

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

Читайте также:  Все, что вам нужно знать об условных html комментариях

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).

Ссылка на основную публикацию
Adblock
detector