Горячая перезагрузка в ElectronJS | Комплект - 2

Опубликовано: 28 Июля, 2021

ElectronJS - это платформа с открытым исходным кодом, используемая для создания кроссплатформенных нативных настольных приложений с использованием веб-технологий, таких как HTML, CSS и JavaScript, которые могут работать в операционных системах Windows, macOS и Linux. Он объединяет движок Chromium и NodeJS в единую среду выполнения.

Эта статья является продолжением Hot Reload в ElectronJS. В предыдущей статье мы обсудили, что такое Hot Reload / Live Reload и как реализовать это в приложении Electron с помощью пакетов npm electronic-reload и electronic- reloader соответственно. В этой статье мы реализуем горячую перезагрузку в приложении Electron, используя пакеты elemon и electronic-hot-reload npm соответственно. Кроме того, как упоминалось в предыдущей статье, функция горячей перезагрузки должна быть реализована только в среде разработки. Следовательно, мы использовали переменную среды NODE_ENV для определения того же значения, что и в предыдущей статье. Мы можем получить доступ к этой переменной, используя глобальный объект процесса в Electron.

  • См. Статью: Объект процесса в ElectronJS .

Мы также можем установить эту переменную среды из консоли Windows. Для получения более подробной информации о переменных окружения, поддерживаемых и используемых в Electron.

  • См. Статью: Переменные среды в ElectronJS .

В случае, если нам нужно решение для промежуточной среды разработки, которое поддерживается на всех платформах ОС и не требует каких-либо изменений конфигурации, мы также можем обратиться к статье: Управление промежуточными средами в ElectronJS . Мы продолжим использовать ту же базу кода, на которой остановились в предыдущей статье. Структура проекта и файл package.json также остаются прежними. Теперь мы реализуем функцию Hot Reload, используя пакеты elemon и electronic-hot-reload npm соответственно.

  • Сначала мы установим elemon с помощью npm .
 npm install elemon --save
  • Установите электронно-горячую перезагрузку с помощью npm .
 npm install electronic-hot-reload --save

Оба эти пакета совершенно не связаны между собой, имеют разный синтаксис и используют разные методы. Мы можем реализовать функцию Hot Reload, используя оба этих пакета по отдельности в Electron. Основные шаги, необходимые для настройки приложения Electron, остаются прежними.

package.json:

 {
  "name": "электронно-горячий",
  "версия": "1.0.0",
  "description": "Горячая перезагрузка для электрона",
  "main": "main.js",
  "scripts": {
    "старт": "электрон".
  },
  "ключевые слова": [
    "электрон"
  ],
  «автор»: «Радхеш Ханна»,
  "лицензия": "ISC",
  "dependencies": {
    "электрон": "^ 8.2.5",
    "электронно-горячая перезагрузка": "^ 0.1.4",
    "элемент": "^ 5.0.3"
  },
  "devDependencies": {
    "электрон-перезагрузка": "^ 1.5.0",
    "электрон-перезагрузчик": "^ 1.0.1"
  }
}

Выход:

Примечание. Подробное описание переменной среды NODE_ENV см. В предыдущей статье.

  • Подход 1. Использование пакета elemon npm. Elemon - это легкий модуль, который обеспечивает простой и эффективный способ добавления функциональности Hot Reload при разработке приложений Electron. Кроме того, этот пакет можно использовать только после того, как событие готовности модуля приложения генерируется в основном процессе приложения. По словам авторов и участников этого пакета, код соответствует стандарту JS, который определяет определенный набор правил, которые необходимо соблюдать при кодировании на JavaScript . При реализации горячей перезагрузки в Electron с использованием этого пакета, если есть какие-либо изменения в каком-либо из процессов рендеринга, соответствующий экземпляр BrowserWindow перезагружается, но при изменении основного процесса приложения, то есть файла main.js , приложение выходит. текущий экземпляр и перезапускается с новым экземпляром, чтобы отразить изменения.
  • Для получения более подробной информации перейдите по ссылке: Этот пакет совместим с Electron v8.3.0, работает без ошибок и регулярно обновляется.

https://www.npmjs.com/package/elemon. 

  • main.js : добавьте в этот файл следующий фрагмент. Мы добавим этот фрагмент кода в функцию createWindow () .

javascript




const env = process.env.NODE_ENV || 'development' ;
// ..
// Open the DevTools.
win.webContents.openDevTools()
if (env === 'development' ) {
const elemon = require( 'elemon' )
elemon({
app: app,
mainFile: 'main.js' ,
bws: [
// The BrowserWindow Instance used
// in the createWindow() function is win.
{ bw: win, res: [ 'index.html' ] },
]
});
}
  • Объяснение: Метод экземпляра elemon (refs) принимает следующие параметры. Этот метод не имеет возвращаемого типа. Все параметры, переданные в этом методе экземпляра, являются обязательными .
    • refs: Object Этот объект принимает ссылки на экземпляр приложения, экземпляры BrowserWindow , файл основного процесса и соответствующие файлы и экземпляры процесса рендеринга. Он принимает следующие параметры.
      • app: Object Этот параметр принимает объект, представляющий Экземпляр основного модуля приложения, который импортируется при запуске файла main.js.
      • mainFile: String Этот параметр принимает строку , представляющую имя файла основного процесса. В данном случае это файл main.js.
      • bws: Object [] Этот параметр принимает массив объектов , каждый из которых представляет соответствующий экземпляр BrowserWindow и связанные с ним файлы и ресурсы. Если существует несколько экземпляров BrowserWindow, определенных в основном процессе приложения, то каждый экземпляр BrowserWindow будет представлен как отдельный объект в массиве. Каждый объект bws принимает следующие параметры.
        • bw: Object Этот параметр представляет глобальный экземпляр BrowserWindow.
        • res: String [] Этот параметр представляет массив строк, где каждая строка представляет ресурс или имя файла, который каким-то образом связан с этим экземпляром BrowserWindow. В нашем случае этот параметр будет состоять из index.html как единственного элемента String в массиве res. Обратитесь к коду для лучшего понимания.
  • Подход 2: Использование пакета npm с горячей перезагрузкой электронов. Электронная горячая перезагрузка также является легким модулем, который обеспечивает простой способ добавления функциональности горячей перезагрузки при разработке приложений Electron. Кроме того, этот пакет можно использовать только после того, как событие готовности модуля приложения генерируется в основном процессе приложения. Этот пакет не так популярен, как elemon, но он предоставляет другой набор функций, чем другие пакеты. Наиболее важной особенностью этого пакета является то, что он предоставляет отдельные наблюдатели для основного процесса и различных процессов рендеринга приложения, что делает его более настраиваемым для каждого из процессов. Мы также можем указать хуки до того, как произойдет горячая перезагрузка для файлов, и мы можем напрямую указать имена файлов, для которых мы хотим горячую перезагрузку. Этот пакет также обеспечивает дополнительное преимущество обнаружения необработанных ошибок в приложении, если мы это укажем.
  • Для получения более подробной информации перейдите по ссылке: Поведение этого пакета такое же, как у elemon. При изменении основного процесса приложение перезапускается, а при изменении процесса рендеринга перезагружается соответствующий экземпляр BrowserWindow. Этот пакет совместим с Electron v8.3.0 и работает без ошибок, но он не обновляется регулярно.

https://www.npmjs.com/package/electron-hot-reload. 

  • main.js : добавьте в этот файл следующий фрагмент. Мы добавим этот фрагмент кода в конец файла, не затрагивая существующий код.

javascript




// Importing the watchers from electron-hot-reload
const { mainReloader, rendererReloader } = require( 'electron-hot-reload' )
const env = process.env.NODE_ENV || 'development' ;
// ..
if (env === 'development' ) {
const mainFile = path.join(__dirname, 'main.js' );
const rendererFile = path.join(__dirname, 'index.html' );
mainReloader(mainFile, (error, path) => {
console.log(path);
console.log( "It is a main's process hook!" );
});
rendererReloader(rendererFile, (error, path) => {
console.log(path);
console.log( "It is a renderer's process hook!" );
});
}
  • Объяснение: И метод экземпляра mainReloader (пути, игнорируемый, обработчик, параметры), и метод экземпляра rendererReloader (пути, игнорируемый, обработчик, параметры) имеют одинаковую сигнатуру метода. Оба эти метода экземпляра принимают следующие параметры. Оба эти метода не имеют возвращаемого типа.
    • paths: String / String [] Этот параметр принимает параметр String или массив строк, представляющий путь к файлам, которые необходимо отслеживать для горячей перезагрузки. Нам нужно указать полный путь к файлу, и поэтому мы использовали метод path.join () модуля пути NodeJS. В этом руководстве мы указали путь к файлу main.js и index.html соответственно для наблюдателей за процессом Main Process и Renderer Process.
    • игнорируется: RegExp / RegExp [] (Необязательно) Этот параметр является необязательным . Этот параметр принимает параметр RegExp или массив RegExp, представляющий выражения Regex файлов и каталогов, которые следует игнорировать при горячей перезагрузке. Для получения более подробной информации о RegExp , обратитесь к статье: JavaScript RegExp [abc] Expression. Чтобы понять, как регулярные выражения работают в JavaScript, обратитесь к статье: Регулярные выражения JavaScript.
    • обработчик: Функция (Необязательно) Эта функция не является обязательной. Эта функция является функцией обратного вызова для создания перехватчиков и перехвата необработанных ошибок в приложении, как указано в описании. Эта функция получает два параметра:
      • error Необработанная ошибка.
      • path Путь к файлу изменен.