Phenquestions
Тази статия ще обхване ръководство за инсталиране на Electron и създаване на просто приложение „Hello World” Electron в Linux.
За Electron
Electron е рамка за разработка на приложения, използвана за създаване на междуплатформени настолни приложения, използващи уеб технологии в самостоятелен уеб браузър. Той също така предоставя специфични за операционната система API и стабилна система за опаковане за по-лесно разпространение на приложенията. Типичното приложение на Electron изисква три неща, за да работи: Node.js runtime, самостоятелен браузър, базиран на Chromium, който се предлага със специфични за Electron и OS API.
Инсталирайте 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”, обяснена в това ръководство, командата по-долу ще създаде три необходими файла:
$ touch индекс.js индекс.html индекс.cssИнсталирайте Electron
Можете да инсталирате Electron във вашата директория на проекта, като изпълните командата по-долу:
$ npm инсталирайте electron --save-devИзчакайте инсталацията да приключи. Electron сега ще бъде добавен към вашия проект като зависимост и трябва да видите папка “node_modules” в директорията на вашия проект. Инсталирането на Electron като зависимост от проекта е препоръчителният начин за инсталиране на Electron съгласно официалната документация на Electron. Ако обаче искате да инсталирате Electron глобално на вашата система, можете да използвате командата, спомената по-долу:
$ npm инсталирайте electron -gДобавете следния ред в раздела „скриптове“ в „пакет“.json ”за завършване на настройката на Electron:
"start": "електрон ."Създайте основно приложение
Отворете „индекс.js ”в текстов редактор по ваш избор и добавете следния код към него:
const приложение, BrowserWindow = изисква ('електрон');функция createWindow ()
const window = нов BrowserWindow (
ширина: 1600,
височина: 900,
webPreferences:
nodeIntegration: вярно
);
прозорец.loadFile ('индекс.html ');
ап.когато е готов ().след това (createWindow);
Отворете „индекс.html ”във вашия любим текстов редактор и поставете следния код в него:
Здравей свят !!
Кодът на javascript е доста обяснителен. Първият ред импортира необходимите модули Electron, необходими на приложението да работи. След това създавате нов прозорец на самостоятелния браузър, който се доставя с Electron, и зареждате индекса.html ”файл в него. Маркировката в „индекс.html “създава нов абзац„ Hello World !!"Увит в"
Таг. Той също така включва препратка към „индекса.css ”файл със стилове, използван по-късно в статията.
Стартирайте приложението си Electron
Изпълнете командата по-долу, за да стартирате приложението си Electron:
$ npm стартАко досега сте спазвали инструкциите правилно, трябва да получите нов прозорец, подобен на този:
Отворете „индекс.css “и добавете кода по-долу, за да промените цвета на„ Hello World !!”Низ.
цвят: червен;
Изпълнете следната команда отново, за да видите CSS стила, приложен към „Hello World !!”Низ.
$ npm старт
Вече имате минималния набор от необходими файлове за стартиране на основно приложение на Electron. Имате „индекс.js “за писане на програмна логика,„ индекс.html “за добавяне на HTML маркировка и„ индекс.css ”за стилизиране на различни елементи. Имате и „пакет.json “и папка„ node_modules “, съдържащи необходимите зависимости и модули.
Пакет Електронно приложение
Можете да използвате Electron Forge за пакетиране на вашето приложение, както се препоръчва от официалната документация на Electron.
Изпълнете командата по-долу, за да добавите Electron Forge към вашия проект:
$ npx @ electron-forge / cli @ последен импортТрябва да видите някои резултати като този:
✔ Проверка на вашата система✔ Инициализиране на Git Repository
✔ Писане на модифициран пакет.json файл
✔ Инсталиране на зависимости
✔ Писане на модифициран пакет.json файл
✔ Фиксиране .gitignore
ОПИТВАМЕ се да преобразуваме приложението ви във формат, който разбира електроните.
Благодарим ви, че използвате "електрон-коване"!!!
Преглед „пакет.json “и редактирайте или премахнете записи от раздели„ създатели “според вашите нужди. Например, ако не искате да изграждате “RPM” файл, премахнете записа, свързан със изграждането на “RPM” пакети.
Изпълнете следната команда, за да изградите пакета за приложение:
$ npm run makeТрябва да получите изход, подобен на този:
> helloworld @ 1.0.0 make / home / nit / HelloWorld> електронно коване марка
✔ Проверка на вашата система
✔ Разрешаване на Forge Config
Трябва да опаковаме вашето заявление, преди да можем да го направим
✔ Подготовка за пакетиране на заявление за арка: x64
✔ Подготовка на местни зависимости
✔ Приложение за опаковане
Осъществяване за следните цели: deb
✔ Осъществяване за цел: deb - На платформа: linux - За arch: x64
Редактирах „пакета.json “, за да изгради само пакета„ DEB “. Можете да намерите вградени пакети в папката „out“, намираща се във вашата директория на проекта.
Заключение
Electron е чудесен за създаване на междуплатформени приложения, базирани на една кодова база с малки промени, специфични за ОС. Той има някои собствени проблеми, най-важният от тях е потреблението на ресурси. Тъй като всичко се изобразява в самостоятелен браузър и се стартира нов прозорец на браузъра с всяко приложение на Electron, тези приложения могат да изискват много ресурси в сравнение с други приложения, използващи набори от инструменти за разработка на специфични за ОС приложения.
