Управление промежуточными средами в ElectronJS

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

В сложном или корпоративном настольном приложении разработчикам нужны разные промежуточные среды для тестирования и развертывания приложения. В зависимости от области применения приложения настраиваются несколько промежуточных сред для тестирования и проверки приложения, прежде чем оно станет наконец доступным для конечного пользователя. Последняя промежуточная среда, в которой приложение развертывается и становится общедоступным, называется производственной . Когда разработка приложения закончена или новая функция добавляется к приложению, то он, как правило , размещен в промежуточной среде развития. В среде разработки, разработчики выполняют основное модульное тестирование и увидеть новые возможности применения в действии. В зависимости от предприятия может быть несколько других промежуточных сред, таких как QA (обеспечение качества) , песочница , предварительная подготовка и т. Д., Прежде чем приложение наконец достигнет стадии производства. Каждая промежуточная среда имеет определенную цель в рамках жизненного цикла приложения. Например, в среде QA приложение проходит интеграционное и регрессионное тестирование. В Pre-Production среде приложение проходит тестирование производительности и нагрузочное тестирование. После того, как приложение пройдет все эти этапы, его можно наконец развернуть в производственной среде, где оно станет доступным для аудитории. Еще одно преимущество этих промежуточных сред состоит в том, что разработчики могут включать в приложение полезные служебные программы и функции отладки, которые не должны быть видны на этапе производства. Это помогает находить ошибки и оценивать производительность приложения.

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

• См. Статью: Объект процесса в ElectronJS .
• См. Статью « Горячая перезагрузка в ElectronJS» .

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

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

Однако проблема в том, что некоторые из этих переменных среды поддерживаются не на всех платформах ОС. Следовательно, должен быть способ, которым мы можем различать различные промежуточные среды, которые работают на всех платформах ОС и не являются сложными или требуют изменений конфигурации. Этого можно добиться с помощью внешнего пакета npm electronic-is-dev. Мы собираемся объяснить различия между различными промежуточными средами в приложении Electron, используя этот внешний пакет npm.

Мы предполагаем, что вы знакомы с предварительными условиями, описанными в вышеупомянутой ссылке. Для работы Electron в системе должны быть предварительно установлены node и npm.

• Структура проекта:

Пример: следуйте инструкциям, приведенным в разделе «Динамическое оформление в ElectronJS», чтобы настроить базовое приложение «Электрон». Скопируйте код Boilerplate для файлов main.js и index.html, как указано в статье. Мы продолжим создавать наше приложение, используя ту же кодовую базу. Кроме того, установите пакет electronic-is-dev с помощью npm. Основная цель этого пакета - просто определить, запускает ли приложение Electron среду РАЗРАБОТКА или ПРОИЗВОДСТВЕННУЮ среду. Для получения дополнительной информации о electronic-is-dev перейдите по ссылке: https://www.npmjs.com/package/electron-is-dev .

 npm install electronic-is-dev --save

Кроме того, внесите необходимые изменения, упомянутые в файле package.json, чтобы запустить приложение Electron. Мы продолжим создавать наше приложение, используя ту же кодовую базу. Основные шаги, необходимые для настройки приложения Electron, остаются прежними.
package.json:

 {
  "name": "электронная сцена",
  "версия": "1.0.0",
  "description": "Управление промежуточными средами в Electron",
  "main": "main.js",
  "scripts": {
    "старт": "электрон".
  },
  "ключевые слова": [
    "электрон"
  ],
  «автор»: «Радхеш Ханна»,
  "лицензия": "ISC",
  "dependencies": {
    "электрон": "^ 8.3.0",
    "электрон-это-разработчик": "^ 1.2.0"
  }
}

Выход:

Управление промежуточными средами в Electron: как упоминалось выше, этот пакет просто используется для проверки, работает ли Electron в среде разработки или нет. Это чрезвычайно полезно для добавления функций отладки и утилит, таких как ведение журнала, создание универсального кода и т. Д. Этот пакет можно использовать непосредственно в основном процессе и процессах рендеринга приложения. Для правильной работы этого пакета требуется Electron 3+. Прежде чем мы перейдем к коду, мы хотели бы внести некоторые изменения в файл main.js приложения.
В файле main.js закомментируйте строки:

• main.js:

• index.js : мы активируем Chrome DevTools из процесса рендеринга, то есть файла index.js, только если приложение работает в режиме разработки.

Объяснение: По умолчанию приложение запускается в промежуточной среде развития. Пакет electronic-is-dev npm возвращает логическое значение, указывающее, работает ли приложение в режиме разработки или в рабочем режиме. По умолчанию возвращаемое значение истинно . В приведенном выше коде, мы активировали темэ DevTools только в режиме разработки с использованием метода openDevTools Instance () на webContents свойстве объекта BrowserWindow.
Выход:

Здесь возникает вопрос: как мы должны активировать промежуточную среду Production в приложении Electron. Пакет electronic-is-dev npm должен возвращать false или undefined, указывая, что приложение работает в производственном режиме и окно Chrome DevTools не должно активироваться при запуске приложения. Мы можем переключаться между различными средами с помощью переменной среды ELECTRON_IS_DEV. Установка для этой переменной среды значения 1 переключит режим разработки, а установка для этой переменной среды любого другого значения, например 0 , запустит приложение в производственном режиме. Чтобы запустить приложение в производственном режиме, внесите следующие изменения в сценарий запуска файла package.json.
package.json:

 {
  "name": "электронная сцена",
  "версия": "1.0.0",
  "description": "Управление промежуточными средами в Electron",
  "main": "main.js",
  "scripts": {
    "start": "установить ELECTRON_IS_DEV = 0 && electronic."
  },
  "ключевые слова": [
    "электрон"
  ],
  «автор»: «Радхеш Ханна»,
  "лицензия": "ISC",
  "dependencies": {
    "электрон": "^ 8.3.0",
    "электрон-это-разработчик": "^ 1.2.0"
  }
}

Объяснение: Поскольку мы работаем в ОС Windows , мы не можем установить переменную среды и запустить приложение из той же команды. Следовательно, нам нужно сначала установить ELECTRON_IS_DEV = 0, а затем запустить приложение Electron.

Примечание. Эта переменная среды будет сброшена после перезапуска системы, если она была установлена из консоли Windows, как показано в приведенном выше примере.
Выход: