Перейти к основному содержанию

Требования

Electron - это фреймворк для разработки десктопных приложений с использованием HTML, CSS и JavaScript. Встраивая Chromium и Node.js в свой исполняемый файл, Electron позволяет создавать кросс-платформенные приложения для Windows, macOS и Linux используя единую кодовую базу JavaScript.

В этом руководстве вы узнаете, как разработать настольное приложение с помощью Electron и распространить его конечным пользователям.

Цели​

В этом руководстве мы рассмотрим все этапы создания базового приложения Electron с нуля, а затем научим вас собирать и распространять его среди пользователей с помощью Electron Forge.

Если вы предпочитаете создавать проект с помощью одной команды, мы рекомендуем начать с команды Electron Forge create-electron-app.

Предпосылки​

Electron является нативной оболочкой для веб-приложений и исполняется в среде Node.js. Поэтому в данном руководстве предполагается, что вы в общих чертах знакомы с Node и основами front-end веб-разработки. Если вам необходимо получить дополнительную информацию, прежде чем продолжить, мы рекомендуем воспользоваться следующими ресурсами:

Необходимые инструменты​

Редактор кода​

Вам понадобится текстовый редактор, чтобы писать код. Мы рекомендуем использовать Visual Studio Code, но вы можете выбрать любой из тех, что вы предпочитаете.

Командная строка​

На протяжении руководства мы будем просить вас использовать различные командные интерфейсы (CLI). Эти команды можно вводить в стандартном терминале системы:

  • Windows: Командная строка или PowerShell
  • macOS: Terminal
  • Linux: зависит от дистрибутива (например: GNOME Terminal, Konsole)

Большинство редакторов имеют встроенный терминал, который вы также можете использовать.

Git и GitHub​

Git - это наиболее распространенная система контроля версий исходного кода, а GitHub - платформа для совместной разработки, построенная на ее основе. Хотя ни то, ни другое не является строго необходимым для создания приложения Electron, далее в руководстве, мы будем использовать GitHub releases для настройки автоматических обновлений. Поэтому от вас потребуется:

Если вы не знакомы с механизмом работы Git, мы рекомендуем ознакомиться с руководствами GitHub по работе с Git. Также можно воспользоваться приложением GitHub Desktop, если вы предпочитаете использовать графический интерфейс, а не командную строку.

Перед началом обучения мы рекомендуем создать локальный Git-репозиторий и разместить его на GitHub, а также делать commit после каждого шага.

Установка Git через GitHub Desktop

GitHub Desktop установит последнюю версию Git в вашей системе, если у вас он ещё не установлен.

Node.js и npm​

Для начала разработки приложения Electron необходимо установить Node.js и входящий в ее состав менеджер пакетов npm. Мы рекомендуем использовать последнюю версию с длительной поддержкой (LTS).

Совет

Пожалуйста, установите Node.js с помощью предварительно собранных установщиков для вашей платформы. В противном случае могут возникнуть проблемы совместимости. Если вы используете macOS, мы рекомендуем воспользоваться менеджером пакетов, например Homebrew или nvm чтобы избежать проблем с правами доступа к каталогам.

Чтобы проверить, что Node.js был установлен правильно, используйте флаг -v при выполнении команд node и npm. В результате должны быть отображены их версии.

$ node -v
v16.14.2
$ npm -v
8.7.0
Предупреждение

Хотя для создания проекта Electron необходима установленная локально Node.js, Electron не использует Node.js вашей системы для выполнения своего кода. Вместо этого он поставляется в комплекте с собственной средой выполнения Node.js. Таким образом, конечным пользователям не нужно самостоятельно устанавливать Node.js для запуска вашего приложения.

Чтобы проверить, какая версия Node.js запущена в вашем приложении, вы можете обратиться к глобальной переменной process.versions в основном процессе или скрипте предварительной загрузки (preload). Также можно воспользоваться ссылкой https://releases.electronjs.org/releases.json.