Az Electron beállítása és a Hello World alkalmazás létrehozása Linux alatt

Ez a cikk ismerteti az Electron telepítésével és az egyszerű „Hello World” Electron alkalmazás Linux rendszeren történő létrehozásával kapcsolatos útmutatót.

Az Electronról

Az Electron egy olyan alkalmazásfejlesztő keretrendszer, amelyet platformok közötti asztali alkalmazások létrehozására használnak, webes technológiák segítségével, önálló webböngészőben. Emellett operációs rendszer-specifikus API-kat és robusztus csomagolási rendszert biztosít az alkalmazások könnyebb terjesztése érdekében. Egy tipikus Electron alkalmazás működéséhez három dolog szükséges: Csomópont.js runtime, egy önálló Chromium alapú böngésző, amely Electron és OS-specifikus API-kkal érkezik.

Telepítse a Node-ot.js

Telepítheti a Node-ot.js és „npm” csomagkezelő a következő parancs futtatásával az Ubuntuban:

$ sudo apt install nodejs npm

Ezeket a csomagokat telepítheti más Linux disztribúciókba is a csomagkezelő segítségével. Alternatív megoldásként letöltheti a Node-on elérhető hivatalos bináris fájlokat.js weboldal.

Hozzon létre egy új csomópontot.js Projekt

A Node telepítése után.js és „npm”, hozzon létre egy új „HelloWorld” nevű projektet a következő parancsok egymás utáni futtatásával:

$ mkdir HelloWorld
$ cd HelloWorld

Ezután indítson egy terminált a „HelloWorld” könyvtárban, és futtassa az alábbi parancsot egy új csomag inicializálásához:

$ npm init

Végezze el az interaktív varázslót a terminálon, és szükség szerint írja be a neveket és az értékeket.

Várja meg a telepítés befejezését. Most kell egy „csomag”.json ”fájl a“ HelloWorld ”könyvtárban. „Csomag” birtoklása.json ”fájl a projektkönyvtárban megkönnyíti a projektparaméterek konfigurálását, és a projektet hordozhatóvá teszi a könnyebb megoszthatóság érdekében.

A csomag.json ”fájlnak ilyen bejegyzést kell tartalmaznia:

"main": "index.js "

"Index.js ”a fő program minden logikája. Létrehozhat további „.js ”,„.html ”és„.css ”fájlokat az Ön igényeinek megfelelően. Az útmutatóban ismertetett „HelloWorld” program céljára az alábbi parancs három szükséges fájlt hoz létre:

$ touch index.js index.html index.css

Telepítse az Electron-t

Az Electron telepítését a projektkönyvtárba az alábbi parancs futtatásával telepítheti:

$ npm elektron telepítése --save-dev

Várja meg a telepítés befejezését. Az elektron most hozzáadódik a projekthez függőségként, és látnia kell egy „node_modules” mappát a projekt könyvtárában. Az Electron telepítése projektenkénti függőségként az Electron telepítésének ajánlott módja a hivatalos Electron dokumentáció szerint. Ha azonban globálisan szeretné telepíteni az Electronot a rendszerére, használhatja az alább említett parancsot:

$ npm elektron telepítése -g

Adja hozzá a következő sort a „csomag szkriptek” szakaszához.json ”fájl az Electron beállításának befejezéséhez:

"start": "elektron ."

Fő alkalmazás létrehozása

Nyissa meg az „indexet.js ”fájlt a választott szövegszerkesztőben, és adja hozzá a következő kódot:

const alkalmazás, BrowserWindow = igényel ('elektron');
function createWindow ()
const ablak = new BrowserWindow (
szélesség: 1600,
magasság: 900,
webPreferences:
nodeIntegráció: igaz

);
ablak.loadFile ('index.html ');

kb.amikor kész().majd (createWindow);

Nyissa meg az „indexet.html ”fájlt a kedvenc szövegszerkesztőben, és tegye bele a következő kódot:

Helló Világ !!

A javascript kód eléggé magától értetődő. Az első sor az alkalmazás működéséhez szükséges Electron modulokat importálja. Ezután létrehoz egy új ablakot az Electronhoz mellékelt önálló böngészőből, és betölti az „indexet.html ”fájl. A jelölés az „indexben.html ”fájl létrehoz egy új bekezdést a„ Hello World !!”Csomagolva

”Tag. Tartalmaz egy hivatkozási linket az „indexhez.css ”stíluslapfájl, amelyet később a cikkben használunk.

Futtassa az Electron alkalmazást

Futtassa az alábbi parancsot az Electron alkalmazás elindításához:

$ npm kezdet

Ha eddig megfelelően követte az utasításokat, akkor ehhez hasonló új ablakot kell kapnia:

Nyissa meg az „indexet.css ”fájlt, és adja hozzá az alábbi kódot a“ Hello World !!" húr.

#hworld
piros szín;

Futtassa újra a következő parancsot, hogy megnézze a CSS stílust a „Hello World !!" húr.

$ npm kezdet

Most már rendelkezik a szükséges minimális fájlkészlettel az alapvető Electron alkalmazás futtatásához. Van “indexed.js ”programlogika írására,„ index.html ”a HTML jelölés és az„ index.css ”különféle elemek stílusához. Önnek is van egy „csomagja.json ”fájl és“ node_modules ”mappa, amelyek a szükséges függőségeket és modulokat tartalmazzák.

Csomagelektron alkalmazás

Az Electron Forge segítségével csomagolhatja alkalmazását, a hivatalos Electron dokumentáció szerint.

Futtassa az alábbi parancsot az Electron Forge hozzáadásához a projektjéhez:

$ npx @ electron-forge / cli @ legújabb import

Látnia kell néhány ilyen kimenetet:

✔ A rendszer ellenőrzése
✔ A Git-tárház inicializálása
✔ Módosított csomag írása.json fájl
✔ Függőségek telepítése
✔ Módosított csomag írása.json fájl
✔ rögzítés .gitignore
Megkíséreltük átalakítani az alkalmazást olyan formátumba, amelyet az elektron-hamisítvány érthet.
Köszönjük, hogy az "elektron-hamisítást" használta!!!

Review “csomag.json ”fájlt, és az igényeinek megfelelően szerkesztheti vagy törölheti a bejegyzéseket a“ készítők ”szakaszokból. Például, ha nem szeretne „RPM” fájlt készíteni, akkor távolítsa el az „RPM” csomagok létrehozásával kapcsolatos bejegyzést.

Futtassa a következő parancsot az alkalmazáscsomag felépítéséhez:

$ npm futási márka

Ehhez hasonló kimenetet kell kapnia:

> helloworld @ 1.0.0 make / home / nit / HelloWorld
> elektron-kovács gyártmány
✔ A rendszer ellenőrzése
✔ Forge Config megoldása
Csomagolni kell az alkalmazást, mielőtt elkészíthetjük
✔ Az archív csomagolás előkészítése: x64
✔ Natív függőségek előkészítése
✔ Csomagolási alkalmazás
A következő célok elérése: deb
✔ Készítés a célhoz: deb - Platformon: linux - Archhoz: x64

Szerkesztettem a „csomagot.json ”fájl csak a“ DEB ”csomag felépítéséhez. A beépített csomagokat a projekt könyvtárában található „out” mappában találhatja meg.

Következtetés

Az Electron kiválóan alkalmas cross-platform alkalmazások létrehozására egyetlen kódbázis alapján, kisebb operációs rendszer-specifikus változtatásokkal. Van néhány saját kérdése, amelyek közül a legfontosabb az erőforrás-felhasználás. Mivel mindent különálló böngészőben renderelnek, és minden Electron alkalmazással új böngészőablak indul, ezek az alkalmazások erőforrásigényesek lehetnek, összehasonlítva más natív operációs rendszer-specifikus alkalmazásfejlesztő eszközkészleteket használó alkalmazásokkal.