Phenquestions
Denne artikkelen vil dekke en guide om hvordan du installerer Electron og oppretter en enkel "Hello World" Electron-applikasjon i Linux.
Om Electron
Electron er et rammeverk for applikasjonsutvikling som brukes til å lage plattformapplikasjoner på tvers av plattformer ved hjelp av webteknologier i en frittstående nettleser. Det gir også operativsystemspesifikke API-er og et robust emballasjesystem for enklere distribusjon av applikasjoner. En typisk elektronapplikasjon krever tre ting for å fungere: Node.js runtime, en frittstående Chromium-basert nettleser som kommer med elektron- og OS-spesifikke API-er.
Installer Node.js
Du kan installere Node.js og “npm” pakkebehandling ved å kjøre følgende kommando i Ubuntu:
$ sudo apt installere nodejs npmDu kan installere disse pakkene i andre Linux-distribusjoner fra pakkebehandleren. Alternativt kan du laste ned offisielle binærfiler som er tilgjengelige på Node.js nettsted.
Opprett en ny node.js Prosjekt
Når du har installert Node.js og “npm”, opprett et nytt prosjekt kalt “HelloWorld” ved å kjøre følgende kommandoer etter hverandre:
$ mkdir HelloWorld$ cd HelloWorld
Deretter skyter du opp en terminal i "HelloWorld" -katalogen og kjører kommandoen nedenfor for å initialisere en ny pakke:
$ npm initGå gjennom den interaktive veiviseren i terminalen og skriv inn navn og verdier etter behov.
Vent til installasjonen er ferdig. Du bør nå ha en “pakke.json ”-fil i“ HelloWorld ”-katalogen. Å ha en “pakke.json ”-fil i prosjektkatalogen gjør det lettere å konfigurere prosjektparametere og gjør prosjektet bærbart for enklere delbarhet.
Pakken.json ”-filen skal ha en slik oppføring:
"main": "indeks.js "“Indeks.js ”er der all logikk for hovedprogrammet ditt befinner seg. Du kan opprette flere “.js ”,“.html ”og“.css ”filer i henhold til dine behov. For formålet med “HelloWorld” -programmet som er forklart i denne guiden, vil kommandoen nedenfor opprette tre nødvendige filer:
$ touch-indeks.js indeks.html-indeks.cssInstaller Electron
Du kan installere Electron i prosjektkatalogen din ved å kjøre kommandoen nedenfor:
$ npm installer elektron - save-devVent til installasjonen er ferdig. Elektron vil nå bli lagt til prosjektet ditt som en avhengighet, og du bør se en "node_modules" -mappe i prosjektkatalogen din. Installering av elektron som en avhengighet per prosjekt er den anbefalte måten å installere elektron i henhold til den offisielle elektrondokumentasjonen. Men hvis du vil installere Electron globalt på systemet ditt, kan du bruke kommandoen nevnt nedenfor:
$ npm installer elektron -gLegg til følgende linje i delen "skript" i "pakke.json ”-fil for å fullføre oppsett av elektron:
"start": "elektron ."Opprett hovedapplikasjon
Åpne “indeks.js ”-fil i tekstredigerer etter eget valg, og legg til følgende kode i den:
const app, BrowserWindow = krever ('elektron');funksjon createWindow ()
const-vindu = ny BrowserWindow (
bredde: 1600,
høyde: 900,
webPreferanser:
nodeIntegration: true
);
vindu.loadFile ('indeks.html ');
app.nårReady ().deretter (createWindow);
Åpne “indeks.html ”-filen i favorittredigeringsprogrammet ditt, og legg følgende kode i den:
Hei Verden !!
Javaskriptkoden er ganske selvforklarende. Første linje importerer nødvendige elektronmoduler som trengs for at appen skal fungere. Deretter oppretter du et nytt vindu i den frittstående nettleseren som følger med Electron og laster inn “indeksen.html ”-fil i den. Markeringen i “indeksen.html ”-fil oppretter et nytt avsnitt“ Hello World !!"Pakket inn i"
" stikkord. Den inneholder også en referanselink til "indeksen.css ”stilarkfil som ble brukt senere i artikkelen.
Kjør elektronapplikasjonen
Kjør kommandoen nedenfor for å starte Electron-appen:
$ npm startHvis du har fulgt instruksjonene riktig så langt, bør du få et nytt vindu som ligner på dette:
Åpne “indeks.css ”-fil og legg til koden nedenfor for å endre fargen på“ Hello World !!”Streng.
fargen rød;
Kjør følgende kommando igjen for å se CSS-stil brukt på “Hello World !!”Streng.
$ npm start
Du har nå et minimumssett med nødvendige filer for å kjøre en grunnleggende Electron-applikasjon. Du har “indeks.js ”for å skrive programlogikk,“ indeks.html "for å legge til HTML-markering og" indeks.css ”for styling av ulike elementer. Du har også en “pakke.json ”-fil og“ node_modules ”-mappe som inneholder nødvendige avhengigheter og moduler.
Pakkeelektronapplikasjon
Du kan bruke Electron Forge til å pakke søknaden din, som anbefalt av den offisielle Electron-dokumentasjonen.
Kjør kommandoen nedenfor for å legge til Electron Forge i prosjektet ditt:
$ npx @ electron-forge / cli @ siste importDu bør se noen utdata som dette:
✔ Kontrollere systemet ditt✔ Initialisere Git Repository
✔ Skrive endret pakke.json-fil
✔ Installere avhengigheter
✔ Skrive endret pakke.json-fil
✔ Fiksing .gitignore
Vi har FORSØKET å konvertere appen din til å være i et format som elektron-forge forstår.
Takk for at du brukte "elektron-smi"!!!
Gjennomgå “pakke.json ”fil og rediger eller fjern oppføringer fra“ produsent ”-seksjoner i henhold til dine behov. For eksempel, hvis du ikke vil bygge en "RPM" -fil, fjern oppføringen knyttet til bygging av "RPM" -pakker.
Kjør følgende kommando for å bygge applikasjonspakken:
$ npm kjøre merkeDu bør få noe som ligner på dette:
> helloworld @ 1.0.0 make / home / nit / HelloWorld> elektron-smi fabrikat
✔ Kontrollere systemet
✔ Løse Forge Config
Vi må pakke søknaden din før vi kan klare den
✔ Forbereder pakkesøknad for arch: x64
✔ Forbereder innfødte avhengigheter
✔ Emballasjeapplikasjon
Å gjøre for følgende mål: deb
✔ Making for target: deb - På plattform: linux - For arch: x64
Jeg redigerte “pakken.json ”-fil for å bygge bare“ DEB ”-pakken. Du kan finne innebygde pakker i "ut" -mappen i prosjektkatalogen.
Konklusjon
Electron er flott for å lage applikasjoner på tvers av plattformer basert på en enkelt kodebase med mindre OS-spesifikke endringer. Det har noen egne problemer, det viktigste er ressursforbruk. Siden alt blir gjengitt i en frittstående nettleser og et nytt nettleservindu lanseres med hver Electron-app, kan disse applikasjonene være ressurskrevende sammenlignet med andre applikasjoner som bruker innebygde OS-spesifikke applikasjonsutviklingsverktøy.
