Phenquestions
Dit artikel bevat een handleiding over het installeren van Electron en het maken van een eenvoudige "Hello World" Electron-app in Linux.
Over Electron
Electron is een applicatieontwikkelingsraamwerk dat wordt gebruikt voor het maken van platformonafhankelijke desktopapplicaties met behulp van webtechnologieën in een zelfstandige webbrowser web. Het biedt ook besturingssysteemspecifieke API's en een robuust verpakkingssysteem voor eenvoudigere distributie van applicaties. Een typische Electron-toepassing vereist drie dingen om te werken: Knooppunt.js runtime, een zelfstandige Chromium-gebaseerde browser die wordt geleverd met Electron- en OS-specifieke API's.
Knooppunt installeren.js
U kunt Node . installeren.js en "npm" pakketbeheerder door de volgende opdracht in Ubuntu uit te voeren:
$ sudo apt install nodejs npmU kunt deze pakketten in andere Linux-distributies installeren vanuit de pakketbeheerder. U kunt ook officiële binaire bestanden downloaden die beschikbaar zijn op Node.js-website.
Een nieuw knooppunt maken.js-project
Nadat u Node . hebt geïnstalleerd.js en "npm", maak een nieuw project met de naam "HelloWorld" door de volgende opdrachten achter elkaar uit te voeren:
$ mkdir HelloWorld$ cd HelloWorld
Start vervolgens een terminal in de map "HelloWorld" en voer de onderstaande opdracht uit om een nieuw pakket te initialiseren:
$ npm initDoorloop de interactieve wizard in de terminal en voer zo nodig namen en waarden in.
Wacht tot de installatie is voltooid. U zou nu een "pakket" moeten hebben.json"-bestand in de map "HelloWorld". Een "pakket" hebben.json"-bestand in uw projectdirectory maakt het gemakkelijker om projectparameters te configureren en maakt het project draagbaar voor gemakkelijker deelbaarheid.
Het pakket.json"-bestand zou een vermelding als deze moeten hebben:
"main": "index.js""Inhoudsopgave.js" is waar alle logica voor uw hoofdprogramma zich zou bevinden. U kunt extra ".js”, “.html” en “.css"-bestanden volgens uw behoeften. Voor het doel van het "HelloWorld"-programma dat in deze handleiding wordt uitgelegd, maakt de onderstaande opdracht drie vereiste bestanden:
$ raak index aan.js-index.html-index.cssElektron installeren
U kunt Electron in uw projectdirectory installeren door de onderstaande opdracht uit te voeren:
$ npm installeer elektron --save-devWacht tot de installatie is voltooid. Electron wordt nu als afhankelijkheid aan uw project toegevoegd en u zou een map "node_modules" in uw projectdirectory moeten zien. Electron installeren als afhankelijkheid per project is de aanbevolen manier om Electron te installeren volgens de officiële Electron-documentatie. Als u Electron echter wereldwijd op uw systeem wilt installeren, kunt u de onderstaande opdracht gebruiken:
$ npm installeer elektron -gVoeg de volgende regel toe aan het gedeelte "scripts" in "pakket.json"-bestand om de installatie van Electron te voltooien:
"start": "elektron ."Hoofdtoepassing maken
"Index" openen.js"-bestand in de teksteditor van uw keuze en voeg de volgende code toe:
const app, BrowserWindow = vereisen ('elektron');functie createWindow ()
const venster = nieuw BrowserWindow(
breedte: 1600,
hoogte: 900,
webVoorkeuren:
nodeIntegratie: waar
);
venster.loadFile('index.html');
app.wanneer klaar().dan (createWindow);
"Index" openen.html”-bestand in uw favoriete teksteditor en plaats de volgende code erin:
Hallo Wereld !!
De javascript-code is vrij duidelijk. De eerste regel importeert de benodigde Electron-modules die nodig zijn om de app te laten werken. Vervolgens maakt u een nieuw venster van de zelfstandige browser die bij Electron wordt geleverd en laadt u de "index".html”-bestand erin. De opmaak in de "index".html” bestand maakt een nieuwe paragraaf “Hallo wereld !!” verpakt in de “
" label. Het bevat ook een verwijzingslink naar de "index".css"-stylesheetbestand dat later in het artikel wordt gebruikt.
Voer uw Electron-toepassing uit
Voer de onderstaande opdracht uit om uw Electron-app te starten:
$ npm startAls je de instructies tot nu toe correct hebt gevolgd, zou je een nieuw venster moeten krijgen dat er ongeveer zo uitziet:
"Index" openen.css"-bestand en voeg de onderstaande code toe om de kleur van "Hello World" te wijzigen !!" draad.
kleur rood;
Voer de volgende opdracht opnieuw uit om te zien hoe de CSS-stijl is toegepast op "Hallo wereld !!" draad.
$ npm start
U hebt nu het absolute minimum aan vereiste bestanden om een eenvoudige Electron-toepassing uit te voeren. Je hebt "index".js" om programmalogica te schrijven, "index.html” voor het toevoegen van HTML-opmaak en “index.css" voor het stylen van verschillende elementen. Je hebt ook een "pakket".json"-bestand en de map "node_modules" met de vereiste afhankelijkheden en modules.
Pakket Electron Toepassing:
U kunt Electron Forge gebruiken om uw applicatie te verpakken, zoals aanbevolen door de officiële Electron-documentatie.
Voer de onderstaande opdracht uit om Electron Forge aan uw project toe te voegen:
$ npx @electron-forge/cli@laatste importJe zou wat output als volgt moeten zien:
✔ Uw systeem controleren✔ Git-repository initialiseren
✔ Aangepast pakket schrijven.json-bestand
✔ Afhankelijkheden installeren
✔ Aangepast pakket schrijven.json-bestand
✔ Bevestiging .gitignore
We hebben GEPROBEERD om uw app om te zetten in een formaat dat door elektronen smeedt begrepen wordt.
Bedankt voor het gebruik van "electron-forge"!!!
Beoordeel “pakket.json" -bestand en bewerk of verwijder items uit "makers" -secties volgens uw behoeften. Als u bijvoorbeeld geen "RPM" -bestand wilt bouwen, verwijdert u de vermelding die verband houdt met het bouwen van "RPM" -pakketten.
Voer de volgende opdracht uit om het toepassingspakket te bouwen:
$ npm run makeU zou een uitvoer moeten krijgen die lijkt op deze:
> [email protected] maak /home/nit/HelloWorld> elektron-smeden maken
✔ Uw systeem controleren
✔ Forge Config oplossen
We moeten uw aanvraag verpakken voordat we deze kunnen maken
✔ Voorbereiden op pakkettoepassing voor arch: x64
✔ Native afhankelijkheden voorbereiden
✔Verpakkingstoepassing
Maken voor de volgende doelen: deb
✔ Maken voor doel: deb - Op platform: linux - Voor arch: x64
Ik heb het "pakket" bewerkt.json"-bestand om alleen het "DEB"-pakket te bouwen. U kunt ingebouwde pakketten vinden in de map "out" in uw projectmap.
Conclusie
Electron is geweldig voor het maken van platformonafhankelijke applicaties op basis van een enkele codebase met kleine OS-specifieke wijzigingen. Het heeft zijn eigen problemen, de belangrijkste is het verbruik van hulpbronnen. Aangezien alles wordt weergegeven in een zelfstandige browser en er een nieuw browservenster wordt gestart met elke Electron-app, kunnen deze applicaties veel resources vergen in vergelijking met andere applicaties die native OS-specifieke toolkits voor applicatieontwikkeling gebruiken.
