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