tieJS: Der JavaScript-Editor für Einsteiger

tieJS-Tutorial: Serverseitigen JavaScript-Code mit dem NodeJS-Plug-in schreiben
Keine Kommentare

Von den ersten Schritten bis zur browsertauglichen Anwendung mit NodeJS: Der Code-Editor tieJS steigt einfach ein und wächst mit den Kenntnissen des Anwenders. Heute stellt euch tieJS-Entwickler Marco Neumann das NodeJS-Plug-in vor.

Die frei verfügbare Software tieJS ist eine Entwicklungsumgebung für die Programmierung mit JavaScript. Die Grundversion enthält nur die wichtigsten Funktionen, damit die Bedienung einfach bleibt. Durch Plug-ins kann die Funktionalität des Editors erweitert werden.

Die Plug-ins können unter https://ilernen.eu/tieJS/#idpluginlist als zip-Datei heruntergeladen werden. Das hier betrachtete NodeJS-Plug-in wird dazu verwendet serverseitigen JavaScript-Code zu erstellen. Dabei kann man auf das umfangreiche JavaScript-NPM-Modul-Ökosystems zurückgreifen und die bereits zur Lösung vieler Fragestellungen vorhandenen Module verwenden. Mit Hilfe von Browserify kann der serverseitige Code schließlich in vielen Fällen auch browsertauglich abgespeichert werden. Dazu später mehr.

Zur Erläuterung der Vorgehensweise soll eine kleine Anwendung zur Minifizierung einer JavaScript-Datei erstellt werden. Dazu soll die Datei math.js zunächst eingelesen, unnötige Kommentare und Leerzeichen entfernt und schließlich unter dem Namen math.min.js abgespeichert werden.

Ursprünglicher Code:

Minifizierter Code:

Code-Minifizierung sollte vor der Veröffentlichung einer Webseite durchgeführt werden, da sich durch die damit verbundene Verkleinerung der Dateigrößen die Ladezeiten verringern.

Um das NodeJS-Plug-in nutzen zu können, muss zunächst NodeJS auf dem Rechner installiert werden. Die aktuelle Version steht unter https://nodejs.org/de/ zum Download bereit. Mit enthalten in NodeJS ist der Paketmanager NPM, mit dem man Zugriff auf die im Internet verfügbaren NPM-Module erhält. Die NPM-Moduldatenbank kann unter https://www.npmjs.com/ durchsucht werden.

Nach Download des NodeJS-Plug-ins für tieJS unter https://ilernen.eu/tieJS/#idpluginlist und Installation durch Auspacken und Kopieren des Ordners plugin_nodejs in den tieJS-Ordner tieJS\bin\plugins steht das Plug-in zur Verfügung:

Das NodeJS-Plug-in soll die Nutzung der rein Kommandozeilenbasierten Verwendung von NodeJS und NPM etwas erleichtern.

Zur Erstellung der Minifizierungsanwendung wird zunächst ein neuer Ordner angelegt. Wichtig: Der Name des Ordners darf nicht mit einem der von NPM zu installierenden Module übereinstimmen, denn sonst kann das betreffende Modul nicht installiert werden. Unsere Anwendung erhält daher den Namen myminifier. In diesem Ordner legen wir die JavaScript-Datei index.js an und öffnen diese mit tieJS.

Mit Hilfe des NodeJS- Plug-ins erstellen wir für unsere Anwendung eine package.json-Datei:

Jede NodeJS-Anwendung hat eine package.json-Datei. In dieser sind der Name der Anwendung und weitere Metadaten zur Anwendung sowie die verwendeten NPM-Module verzeichnet.

Um Textdateien einlesen und speichern zu können installieren wir das fs-Modul:

Das Modul (sowie alle vom installierten Modul verwendeten Module) werden von NPM heruntergeladen und im Unterordner node_modules installiert:

Zur Durchführung der Minifizierung gibt es bei NPM bereits verschiedene Module, beispielsweise terser, das wir ebenfalls installieren. Des Weiteren benötigen wir noch das Modul path um Pfadmanipulationen durchzuführen.

Um die installierten Module in JavaScript zu nutzen, wird der require-Befehl verwendet:

Die zu minifizierende Datei math.js soll sich im gleichen Verzeichnis befinden:

Der Quelltext wird eingelesen:

Und minifiziert und unter dem Dateinamen math.min.js abgespeichert:

Nach Ausführung des Codes mit dem Button Start node ist die minifizierte-Version der Datei math.js im gleichen Ordner vorhanden:

Möchte man eine auf diese Weise erstellte NodeJS-Anwendung auch im Browser (ohne NodeJS) nutzen, kann mit Browserify die Anwendung in eine browsertaugliche Form verwandelt werden. Allerdings ist das nur möglich, wenn keine Module verwendet wurden, deren Funktion im Browser nicht zur Verfügung stehen. Im vorliegenden Beispiel wird mit fs auf das Dateisystem des Rechners zugegriffen. Das ist aus Sicherheitsgründen vom Browser aus nicht möglich. Um den Minifizierer browsertauglich zu machen, müsste man also auf das Einlesen und Speichern der Dateien verzichten und beispielsweise mit Hilfe von HTML-textarea und Cut+Paste die Ein- und Ausgabe des Quelltextes durchführen.

Die hier vorgestellte Minifizierungsanwendung steht für tieJS als Minify-Modul zum Download zur Verfügung. In Verbindung mit dem HTML-inline-Modul können kleinere Webanwendungen schnell veröffentlichungsbereit gemacht werden, ohne gleich einen der häufig nicht ganz so einfach zu nutzenden Bundler konfigurieren zu müssen. Gerade für Programmiereinsteiger kann das sehr hilfreich sein. Die minifizierten JS-Dateien werden per Script-Tag in die HTML-Startdatei eingebunden und danach mit dem HTML-inline-Modul in eine einzige HTML-Datei verwandelt.

Unsere Redaktion empfiehlt:

Relevante Beiträge

Hinterlasse einen Kommentar

Hinterlasse den ersten Kommentar!

avatar
400
  Subscribe  
Benachrichtige mich zu:
X
- Gib Deinen Standort ein -
- or -