Phenquestions
Den här artikeln kommer att täcka en guide om installation av Electron och skapande av en enkel "Hello World" Electron-applikation i Linux.
Om Electron
Electron är ett ramverk för applikationsutveckling som används för att skapa plattformsapplikationer över flera plattformar med hjälp av webbteknik i en fristående webbläsare. Det tillhandahåller också operativsystemspecifika API: er och ett robust förpackningssystem för enklare distribution av applikationer. En typisk elektronapplikation kräver tre saker för att fungera: Nod.js runtime, en fristående Chromium-baserad webbläsare som levereras med elektron- och OS-specifika API: er.
Installera nod.js
Du kan installera Node.js och “npm” pakethanterare genom att köra följande kommando i Ubuntu:
$ sudo apt installera nodejs npmDu kan installera dessa paket i andra Linux-distributioner från pakethanteraren. Alternativt kan du ladda ner officiella binärer som finns tillgängliga på Node.js webbplats.
Skapa en ny nod.js Project
När du har installerat Node.js och “npm”, skapa ett nytt projekt med namnet “HelloWorld” genom att köra följande kommandon i följd:
$ mkdir HelloWorld$ cd HelloWorld
Starta sedan en terminal i katalogen “HelloWorld” och kör kommandot nedan för att initiera ett nytt paket:
$ npm initGå igenom den interaktiva guiden i terminalen och ange namn och värden efter behov.
Vänta tills installationen är klar. Du borde nu ha ett "paket.json ”-fil i“ HelloWorld ”-katalogen. Att ha ett “paket.json ”-fil i din projektkatalog gör det enklare att konfigurera projektparametrar och gör projektet portabelt för enklare delbarhet.
Paketet.json ”-filen ska ha en sådan post:
"main": "index.js ""Index.js ”är där all logik för ditt huvudprogram finns. Du kan skapa ytterligare “.js ”,“.html ”och“.css ”-filer efter dina behov. För syftet med programmet "HelloWorld" som beskrivs i den här guiden skapar kommandot nedan tre nödvändiga filer:
$ touch index.js index.html-index.cssInstallera Electron
Du kan installera Electron i din projektkatalog genom att köra kommandot nedan:
$ npm installera elektron --save-devVänta tills installationen är klar. Elektron kommer nu att läggas till i ditt projekt som ett beroende och du ska se en "nod_modules" -mapp i din projektkatalog. Installera Electron som ett beroende av projekt är det rekommenderade sättet att installera Electron enligt den officiella Electron-dokumentationen. Men om du vill installera Electron globalt på ditt system kan du använda kommandot nedan:
$ npm installera elektron -gLägg till följande rad i avsnittet "skript" i "paket.json ”-fil för att slutföra elektroninställningen:
"start": "elektron ."Skapa huvudapplikation
Öppna “index.js ”-fil i textredigeraren efter eget val och lägg till följande kod i den:
const app, BrowserWindow = kräver ('elektron');funktion createWindow ()
const-fönster = nytt BrowserWindow (
bredd: 1600,
höjd: 900,
webPreferenser:
nodeIntegration: true
);
fönster.loadFile ('index.html ');
app.när redo().sedan (createWindow);
Öppna “index.html-fil i din favorittextredigerare och lägg in följande kod i den:
Hej världen !!
Javaskriptkoden är ganska självförklarande. Den första raden importerar nödvändiga elektronmoduler som behövs för att appen ska fungera. Därefter skapar du ett nytt fönster i den fristående webbläsaren som kommer med Electron och laddar “indexet.html-fil i den. Markeringen i “index.html-filen skapar ett nytt stycke “Hello World !!”Insvept i”
”Tagg. Den innehåller också en referenslänk till "index.css ”formatmallfil som används senare i artikeln.
Kör din elektronapplikation
Kör kommandot nedan för att starta din Electron-app:
$ npm startOm du hittills har följt instruktionerna korrekt bör du få ett nytt fönster som liknar det här:
Öppna “index.css ”-fil och lägg till koden nedan för att ändra färgen på“ Hello World !!”Sträng.
färgen röd;
Kör följande kommando igen för att se CSS-stil tillämpas på “Hello World !!”Sträng.
$ npm start
Du har nu det minsta uppsättningen nödvändiga filer för att köra en grundläggande Electron-applikation. Du har “index.js ”för att skriva programlogik,” index.html "för att lägga till HTML-markering och" index.css ”för att utforma olika element. Du har också ett ”paket.json-fil och "nod_modules" -mapp som innehåller nödvändiga beroenden och moduler.
Paketelektronapplikation
Du kan använda Electron Forge för att paketera din applikation, enligt rekommendationerna i den officiella Electron-dokumentationen.
Kör kommandot nedan för att lägga till Electron Forge i ditt projekt:
$ npx @ electron-forge / cli @ senaste importDu borde se utdata så här:
✔ Kontrollera ditt system✔ Initiera Git Repository
✔ Skrivmodifierat paket.json-fil
✔ Installera beroenden
✔ Skrivmodifierat paket.json-fil
✔ Fastställande .gitignore
Vi har FÖRSÖKAT att konvertera din app till ett format som elektron-smide förstår.
Tack för att du använder "electron-forge"!!!
Granska “paket.json ”fil och redigera eller ta bort poster från“ tillverkare ”avsnitt efter dina behov. Om du till exempel inte vill bygga en ”RPM” -fil, ta bort posten relaterad till byggandet av ”RPM” -paket.
Kör följande kommando för att bygga applikationspaketet:
$ npm kör märkeDu borde få lite output som liknar detta:
> helloworld @ 1.0.0 make / home / nit / HelloWorld> elektron-smide fabrikat
✔ Kontrollera ditt system
✔ Lösa Forge Config
Vi måste packa din ansökan innan vi kan göra den
✔ Förbereder för paketansökan för arch: x64
✔ Förbereda infödda beroenden
✔ Förpackningsapplikation
Gör för följande mål: deb
✔ Making for target: deb - På plattform: linux - För arch: x64
Jag redigerade ”paketet.json ”-fil för att bara bygga paketet” DEB ”. Du kan hitta inbyggda paket i mappen "ut" i projektkatalogen.
Slutsats
Electron är utmärkt för att skapa plattformsapplikationer baserade på en enda kodbas med mindre OS-specifika förändringar. Det har några egna problem, det viktigaste av dem är resursförbrukning. Eftersom allt återges i en fristående webbläsare och ett nytt webbläsarfönster startas med varje Electron-app kan dessa applikationer vara resurskrävande jämfört med andra applikationer med hjälp av inbyggda OS-specifika applikationsutvecklingsverktygssatser.
