Phenquestions
Denne artikel dækker en guide til installation af Electron og oprettelse af en simpel "Hello World" elektronapplikation i Linux.
Om Electron
Electron er en applikationsudviklingsramme, der bruges til at oprette desktop-applikationer på tværs af platforme ved hjælp af webteknologier i en uafhængig webbrowser. Det giver også operativsystemspecifikke API'er og et robust emballagesystem til lettere distribution af applikationer. En typisk elektronapplikation kræver tre ting for at fungere: Node.js runtime, en uafhængig Chromium-baseret browser, der leveres med elektron- og OS-specifikke API'er.
Installer node.js
Du kan installere Node.js og “npm” pakkehåndtering ved at køre følgende kommando i Ubuntu:
$ sudo apt installere nodejs npmDu kan installere disse pakker i andre Linux-distributioner fra pakkehåndteringen. Alternativt kan du downloade officielle binære filer, der er tilgængelige på Node.js websted.
Opret en ny node.js projekt
Når du har installeret Node.js og “npm”, opret et nyt projekt med navnet “HelloWorld” ved at køre følgende kommandoer i rækkefølge:
$ mkdir HelloWorld$ cd HelloWorld
Skyd derefter en terminal i mappen "HelloWorld" og kør kommandoen nedenfor for at initialisere en ny pakke:
$ npm initGå gennem den interaktive guide i terminalen, og indtast navne og værdier efter behov.
Vent på, at installationen er færdig. Du skal nu have en “pakke.json ”-fil i“ HelloWorld ”-mappen. At have en “pakke.json ”-fil i din projektmappe gør det lettere at konfigurere projektparametre og gør projektet bærbart for lettere delbarhed.
Pakken.json ”-filen skal have en post som denne:
"main": "index.js ""Indeks.js ”er, hvor al logik til dit hovedprogram vil være placeret. Du kan oprette yderligere “.js ”,“.html ”og“.css ”-filer efter dine behov. Med henblik på “HelloWorld” -programmet, der er forklaret i denne vejledning, opretter kommandoen nedenfor tre nødvendige filer:
$ touch-indeks.js indeks.html-indeks.cssInstaller Electron
Du kan installere Electron i dit projektkatalog ved at køre kommandoen nedenfor:
$ npm installer elektron - save-devVent på, at installationen er færdig. Elektron føjes nu til dit projekt som en afhængighed, og du skal se en "node_modules" -mappe i dit projektkatalog. Installation af Electron som afhængighed pr. Projekt er den anbefalede måde at installere Electron på i henhold til den officielle elektronedokumentation. Men hvis du vil installere Electron globalt på dit system, kan du bruge kommandoen nævnt nedenfor:
$ npm installer elektron -gFøj følgende linje til afsnittet "scripts" i "pakke.json ”-fil for at afslutte elektronopsætningen:
"start": "elektron ."Opret hovedapplikation
Åbn “indeks.js ”-fil i teksteditor efter eget valg og tilføj følgende kode til den:
const app, BrowserWindow = kræver ('elektron');funktion createWindow ()
const-vindue = ny BrowserWindow (
bredde: 1600,
højde: 900,
webPræferencer:
nodeIntegration: sand
);
vindue.loadFile ('indeks.html ');
app.whenReady ().derefter (createWindow);
Åbn “indeks.html ”-fil i din foretrukne teksteditor, og læg følgende kode i den:
Hej Verden !!
Javascript-koden er ret selvforklarende. Første linje importerer nødvendige elektronmoduler, der er nødvendige for, at appen fungerer. Derefter opretter du et nyt vindue i den enkeltstående browser, der følger med Electron og indlæser “indekset.html ”-fil i den. Markeringen i “indekset.html ”-fil opretter et nyt afsnit“ Hello World !!”Pakket ind i“
”Tag. Det inkluderer også et referencelink til "indekset.css ”stilarkfil, der blev brugt senere i artiklen.
Kør din elektronapplikation
Kør kommandoen nedenfor for at starte din Electron-app:
$ npm startHvis du indtil videre har fulgt instruktionerne korrekt, skal du få et nyt vindue svarende til dette:
Åbn “indeks.css ”-fil og tilføj koden nedenfor for at ændre farven på“ Hello World !!”Streng.
farve: rød;
Kør følgende kommando igen for at se CSS-stil anvendt på “Hello World !!”Streng.
$ npm start
Du har nu det absolutte minimumssæt af nødvendige filer til at køre en grundlæggende Electron-applikation. Du har “indeks.js ”for at skrive programlogik,“ indeks.html ”til tilføjelse af HTML-markering og“ indeks.css ”til styling af forskellige elementer. Du har også en “pakke.json ”-fil og“ node_modules ”-mappe, der indeholder nødvendige afhængigheder og moduler.
Pakkeelektronapplikation
Du kan bruge Electron Forge til at pakke din applikation som anbefalet af den officielle Electron-dokumentation.
Kør kommandoen nedenfor for at tilføje Electron Forge til dit projekt:
$ npx @ electron-forge / cli @ seneste importDu skal se noget output som dette:
✔ Kontrol af dit system✔ Initialisering af Git Repository
✔ Skrivemodificeret pakke.json-fil
✔ Installation af afhængigheder
✔ Skrivemodificeret pakke.json-fil
✔ Fastgørelse .gitignore
Vi har FORSØGET at konvertere din app til at være i et format, som elektron-forge forstår.
Tak for brugen af "elektron-smed"!!!
Gennemgå “pakke.json ”fil og rediger eller fjern poster fra“ producenter ”sektioner i henhold til dine behov. For eksempel, hvis du ikke ønsker at oprette en "RPM" -fil, skal du fjerne post relateret til opbygning af "RPM" -pakker.
Kør følgende kommando for at oprette applikationspakken:
$ npm kør mærkeDu skal få noget output svarende til dette:
> helloworld @ 1.0.0 mærke / hjem / nit / HelloWorld> elektron-smedemærke
✔ Kontrol af dit system
✔ Løsning af Forge Config
Vi er nødt til at pakke din ansøgning, inden vi kan gøre den
✔ Forberedelse til pakkeansøgning til arch: x64
✔ Forberedelse af native afhængigheder
✔ Emballeringsapplikation
Gør følgende mål: deb
✔ Making for target: deb - På platform: linux - Til arch: x64
Jeg redigerede “pakken.json ”-fil til kun at bygge” DEB ”-pakken. Du kan finde indbyggede pakker i mappen "ud" i projektmappen.
Konklusion
Electron er fantastisk til at skabe applikationer på tværs af platforme baseret på en enkelt codebase med mindre OS-specifikke ændringer. Det har nogle egne problemer, det vigtigste af dem er ressourceforbrug. Da alt gengives i en enkeltstående browser, og der åbnes et nyt browservindue med hver Electron-app, kan disse applikationer være ressourceintensive sammenlignet med andre applikationer ved hjælp af native OS-specifikke applikationsudviklingsværktøjssæt.
