Phenquestions
Dieser Artikel enthält eine Anleitung zur Installation von Electron und zum Erstellen einer einfachen Electron-Anwendung „Hello World“ unter Linux.
Über Electron
Electron ist ein Anwendungsentwicklungs-Framework zum Erstellen plattformübergreifender Desktop-Anwendungen mit Webtechnologien in einem eigenständigen Webbrowser. Es bietet auch betriebssystemspezifische APIs und ein robustes Paketierungssystem für eine einfachere Verteilung von Anwendungen. Eine typische Electron-Anwendung erfordert drei Dinge, um zu funktionieren: Knoten.js-Runtime, ein eigenständiger Chromium-basierter Browser, der mit Electron- und OS-spezifischen APIs geliefert wird.
Knoten installieren.js
Sie können Node . installieren.js und den Paketmanager „npm“, indem Sie den folgenden Befehl in Ubuntu ausführen:
$ sudo apt install nodejs npmSie können diese Pakete in anderen Linux-Distributionen über den Paketmanager installieren. Laden Sie alternativ offizielle Binärdateien herunter, die auf Node verfügbar sind.js-Website.
Erstellen Sie einen neuen Knoten.js-Projekt
Sobald Sie Node . installiert haben.js und „npm“ erstellen Sie ein neues Projekt mit dem Namen „HelloWorld“, indem Sie die folgenden Befehle nacheinander ausführen:
$ mkdir HalloWelt$ cd HelloWorld
Starten Sie als Nächstes ein Terminal im Verzeichnis „HelloWorld“ und führen Sie den folgenden Befehl aus, um ein neues Paket zu initialisieren:
$ npm-InitialisierungGehen Sie den interaktiven Assistenten im Terminal durch und geben Sie nach Bedarf Namen und Werte ein.
Warten Sie, bis die Installation abgeschlossen ist. Sie sollten jetzt ein "Paket" haben.json“-Datei im „HelloWorld“-Verzeichnis. Ein „Paket“ haben.json“-Datei in Ihrem Projektverzeichnis erleichtert die Konfiguration von Projektparametern und macht das Projekt portabel, um die gemeinsame Nutzung zu erleichtern.
Das „Paket“.json“-Datei sollte einen Eintrag wie diesen haben:
"main": "index.js""Index.js“ ist der Ort, an dem sich die gesamte Logik für Ihr Hauptprogramm befinden würde. Sie können zusätzliche „.js“, „.html“ und „.css“-Dateien nach Ihren Bedürfnissen. Für das in diesem Handbuch erläuterte Programm „HelloWorld“ erstellt der folgende Befehl drei erforderliche Dateien:
$ Touch-Index.js-Index.HTML-Index.CSSElektron installieren
Sie können Electron in Ihrem Projektverzeichnis installieren, indem Sie den folgenden Befehl ausführen:
$ npm install Elektron --save-devWarten Sie, bis die Installation abgeschlossen ist. Electron wird nun als Abhängigkeit zu Ihrem Projekt hinzugefügt und Sie sollten einen Ordner „node_modules“ in Ihrem Projektverzeichnis sehen. Die Installation von Electron als projektbezogene Abhängigkeit ist die empfohlene Methode zur Installation von Electron gemäß der offiziellen Electron-Dokumentation. Wenn Sie Electron jedoch global auf Ihrem System installieren möchten, können Sie den unten genannten Befehl verwenden:
$ npm install Elektron -gFügen Sie die folgende Zeile zum Abschnitt "Skripte" in "Paket" hinzu.json“-Datei, um das Electron-Setup abzuschließen:
"start": "elektron ."Hauptanwendung erstellen
Öffnen Sie den „Index“.js“-Datei in einem Texteditor Ihrer Wahl und fügen Sie den folgenden Code hinzu:
const app, BrowserWindow = require('electron');Funktion createWindow()
const window = new BrowserWindow(
Breite: 1600,
Höhe: 900,
Web-Einstellungen:
KnotenIntegration: true
);
Fenster.loadFile('index.html');
App.wenn bereit().dann (Fenster erstellen);
Öffnen Sie den „Index“.html“-Datei in Ihrem bevorzugten Texteditor und fügen Sie den folgenden Code ein:
Hallo Welt !!
Der Javascript-Code ist ziemlich selbsterklärend. Die erste Zeile importiert die notwendigen Elektronenmodule, die für die Funktion der App erforderlich sind. Als nächstes erstellen Sie ein neues Fenster des Standalone-Browsers, der mit Electron geliefert wird, und laden den.html“-Datei darin. Das Markup im „Index“.html“-Datei erstellt einen neuen Absatz „Hello World !!“ eingewickelt in die “
" Etikett. Es enthält auch einen Referenzlink zum „Index“.css“-Stylesheet-Datei, die später im Artikel verwendet wird.
Führen Sie Ihre Elektronenanwendung aus
Führen Sie den folgenden Befehl aus, um Ihre Electron-App zu starten:
$ npm StartWenn Sie die Anweisungen bisher richtig befolgt haben, sollten Sie ein neues Fenster ähnlich diesem erhalten:
Öffnen Sie den „Index“.css“-Datei und fügen Sie den folgenden Code hinzu, um die Farbe von „Hello World . zu ändern !!” Zeichenfolge.
Farbe Rot;
Führen Sie den folgenden Befehl erneut aus, um zu sehen, wie der CSS-Stil auf "Hello World" angewendet wird !!” Zeichenfolge.
$ npm Start
Sie verfügen jetzt über das absolute Minimum an erforderlichen Dateien, um eine grundlegende Electron-Anwendung auszuführen. Sie haben "index".js“, um Programmlogik zu schreiben, „index.html“ zum Hinzufügen von HTML-Markup und „index.css“ zum Stylen verschiedener Elemente. Sie haben auch ein "Paket".json“-Datei und „node_modules“-Ordner mit den erforderlichen Abhängigkeiten und Modulen.
Paketelektronenanwendung
Sie können Electron Forge verwenden, um Ihre Anwendung zu verpacken, wie in der offiziellen Electron-Dokumentation empfohlen.
Führen Sie den folgenden Befehl aus, um Ihrem Projekt Electron Forge hinzuzufügen:
$ npx @electron-forge/cli@neuester ImportSie sollten eine Ausgabe wie diese sehen:
✔ Überprüfung Ihres Systems✔ Git-Repository initialisieren
✔ Geändertes Paket schreiben.json-Datei
✔ Abhängigkeiten installieren
✔ Geändertes Paket schreiben.json-Datei
✔ Befestigung .gitignore
Wir haben VERSUCHT, Ihre App in ein Format umzuwandeln, das Electron-Forge versteht.
Danke für die Verwendung von "Elektronenschmiede"!!!
Bewertung „Paket.json“-Datei und bearbeiten oder entfernen Sie Einträge aus den „Macher“-Abschnitten nach Ihren Bedürfnissen. Wenn Sie beispielsweise keine „RPM“-Datei erstellen möchten, entfernen Sie den Eintrag zum Erstellen von „RPM“-Paketen.
Führen Sie den folgenden Befehl aus, um das Anwendungspaket zu erstellen:
$ npm run makeSie sollten eine ähnliche Ausgabe wie diese erhalten:
> [email protected] mache /home/nit/HelloWorld> Elektronenschmiede machen
✔ Überprüfung Ihres Systems
✔ Forge-Konfiguration auflösen
Wir müssen Ihre Bewerbung verpacken, bevor wir sie erstellen können
✔ Vorbereitung des Paketantrags für Bogen: x64
✔ Native Abhängigkeiten vorbereiten
✔ Verpackungsanwendung
Für die folgenden Ziele: deb
✔ Für Ziel: deb - Auf Plattform: Linux - Für Arch: x64
Ich habe das "Paket" bearbeitet.json“-Datei, um nur das „DEB“-Paket zu erstellen. Sie finden erstellte Pakete im Ordner „out“ in Ihrem Projektverzeichnis.
Fazit
Electron eignet sich hervorragend zum Erstellen plattformübergreifender Anwendungen basierend auf einer einzigen Codebasis mit geringfügigen betriebssystemspezifischen Änderungen. Es hat einige eigene Probleme, die wichtigste davon ist der Ressourcenverbrauch. Da alles in einem eigenständigen Browser gerendert wird und mit jeder Electron-App ein neues Browserfenster geöffnet wird, können diese Anwendungen im Vergleich zu anderen Anwendungen mit nativen betriebssystemspezifischen Anwendungsentwicklungs-Toolkits ressourcenintensiv sein.
