Phenquestions
В этой статье будет рассказано об установке Electron и создании простого приложения Electron «Hello World» в Linux.
Об электроне
Electron - это среда разработки приложений, используемая для создания кроссплатформенных настольных приложений с использованием веб-технологий в автономном веб-браузере. Он также предоставляет API-интерфейсы для конкретных операционных систем и надежную упаковочную систему для упрощения распространения приложений. Для работы типичного приложения Electron требуется три вещи: Узел.js runtime, автономный браузер на основе Chromium, который поставляется с API-интерфейсами для Electron и ОС.
Установить узел.js
Вы можете установить Node.js и диспетчер пакетов «npm», выполнив следующую команду в Ubuntu:
$ sudo apt установить nodejs npmВы можете установить эти пакеты в других дистрибутивах Linux из диспетчера пакетов. Или загрузите официальные двоичные файлы, доступные на Node.js сайт.
Создать новый узел.js Project
После того, как вы установили Node.js и «npm» создайте новый проект с именем «HelloWorld», последовательно выполнив следующие команды:
$ mkdir HelloWorld$ cd HelloWorld
Затем запустите терминал в каталоге «HelloWorld» и выполните команду ниже, чтобы инициализировать новый пакет:
$ npm initПройдите через интерактивный мастер в терминале и введите имена и значения по мере необходимости.
Дождитесь завершения установки. Теперь у вас должен быть «пакет.json »в каталоге« HelloWorld ». Имея «пакет».json »в каталоге вашего проекта упрощает настройку параметров проекта и делает проект переносимым для облегчения совместного использования.
Посылка.json »должен иметь такую запись:
"main": "index.js ""Индекс.js »- это место, где будет расположена вся логика вашей основной программы. Вы можете создать дополнительные «.js »,«.html »и«.css »в соответствии с вашими потребностями. Для программы «HelloWorld», описанной в этом руководстве, приведенная ниже команда создаст три необходимых файла:
$ touch index.js индекс.html-индекс.cssУстановить Электрон
Вы можете установить Electron в каталог своего проекта, выполнив следующую команду:
$ npm установить электрон --save-devДождитесь завершения установки. Electron будет добавлен в ваш проект в качестве зависимости, и вы должны увидеть папку «node_modules» в каталоге вашего проекта. Установка Electron в зависимости от проекта является рекомендуемым способом установки Electron в соответствии с официальной документацией Electron. Однако, если вы хотите установить Electron в своей системе глобально, вы можете использовать команду, указанную ниже:
$ npm установить электрон -gДобавьте следующую строку в раздел «сценарии» в «пакете.json », чтобы завершить настройку Electron:
"start": "электрон ."Создать основное приложение
Открыть «указатель».js »в текстовом редакторе по вашему выбору и добавьте в него следующий код:
const приложение, BrowserWindow = требуется ('электрон');function createWindow ()
const window = new BrowserWindow (
ширина: 1600,
высота: 900,
webPreferences:
nodeIntegration: true
);
окно.loadFile ('индекс.html ');
приложение.когда готово().затем (createWindow);
Открыть «указатель».html »в вашем любимом текстовом редакторе и поместите в него следующий код:
Привет мир !!
Код javascript довольно понятен. Первая строка импортирует необходимые электронные модули, необходимые для работы приложения. Затем вы создаете новое окно автономного браузера, поставляемого с Electron, и загружаете «index.html »в нем. Разметка в «индексе.html »создает новый абзац« Hello World !!"Завернутый в"
" тег. Он также включает ссылку на «указатель.css », который будет использоваться далее в статье.
Запустите свое электронное приложение
Выполните команду ниже, чтобы запустить приложение Electron:
$ npm startЕсли вы до сих пор правильно следовали инструкциям, вы должны получить новое окно, подобное этому:
Открыть «указатель».css »и добавьте приведенный ниже код, чтобы изменить цвет« Hello World !!" нить.
красный цвет;
Выполните следующую команду еще раз, чтобы увидеть стиль CSS, примененный к «Hello World» !!" нить.
$ npm start
Теперь у вас есть минимальный набор необходимых файлов для запуска базового приложения Electron. У вас есть «индекс.js »для написания логики программы,« index.html »для добавления разметки HTML и« index.css »для стилизации различных элементов. У вас также есть «пакет.json »и папку« node_modules », содержащую необходимые зависимости и модули.
Пакетное электронное приложение
Вы можете использовать Electron Forge для упаковки своего приложения в соответствии с рекомендациями официальной документации Electron.
Выполните команду ниже, чтобы добавить Electron Forge в свой проект:
$ npx @ electronic-forge / cli @ последний импортВы должны увидеть что-то вроде этого:
✔ Проверка вашей системы✔ Инициализация репозитория Git
✔ Написание модифицированного пакета.json файл
✔ Установка зависимостей
✔ Написание модифицированного пакета.json файл
✔ Ремонт .gitignore
Мы ПЫТАЛИСЬ преобразовать ваше приложение в формат, понятный electronic-forge.
Спасибо за использование "электрон-кузницы"!!!
Обзор пакета.json »и отредактируйте или удалите записи из разделов« создателей »в соответствии с вашими потребностями. Например, если вы не хотите создавать файл «RPM», удалите запись, связанную со сборкой пакетов «RPM».
Выполните следующую команду, чтобы собрать пакет приложения:
$ npm запустить makeВы должны получить примерно такой результат:
> helloworld @ 1.0.0 make / home / nit / HelloWorld> электронная кузница
✔ Проверка вашей системы
✔ Разрешение конфигурации Forge
Нам нужно упаковать ваше приложение, прежде чем мы сможем его сделать
✔ Подготовка к упаковке приложения для Arch: x64
✔ Подготовка нативных зависимостей
✔ Приложение для упаковки
Делаем для следующих целей: deb
✔ Создание для target: deb - На платформе: linux - Для arch: x64
Я редактировал «пакет».json », чтобы собрать только пакет« DEB ». Вы можете найти созданные пакеты в папке «out», расположенной внутри каталога вашего проекта.
Заключение
Electron отлично подходит для создания кроссплатформенных приложений на основе единой кодовой базы с небольшими изменениями, специфичными для ОС. У него есть свои собственные проблемы, самая важная из них - потребление ресурсов. Поскольку все отображается в автономном браузере и новое окно браузера запускается с каждым приложением Electron, эти приложения могут быть ресурсоемкими по сравнению с другими приложениями, использующими собственные наборы инструментов разработки приложений для конкретных ОС.
