Node.js im Browser ausführen

Aus SELFHTML-Wiki
Wechseln zu: Navigation, Suche

Es gibt zwei Möglichkeiten, JavaScript-Code auszuführen.

  1. Ihr Browser lädt eine Webseite mit JavaScript, welches Interaktivität und den Zugriff auf das DOM erlaubt.
  2. Sie führen nur die JavaScript-Datei mit Node.js aus. Node.js ist eine serverseitige JavaScript-Laufzeitumgebung, die direkt im Computer ohne Browser läuft.

Manchmal möchte man dennoch Node.js-Code im Browser ausführen. So wollen Sie z. B. …

  • eine Node.js-App offline laufen lassen
  • CommonJS-Module mit require() einbinden
  • Node.js-APIs (buffer, crypto, fork, events, streams, …) nutzen
  • mit JavaScript auf das File System des Computers und auf Datenbanken zugreifen, was mit browserbasiertem JavaScript nicht geht.

In diesem Tutorial lernen Sie, Node.js-Module im Browser zu verwenden und auszuführen. Anschließend zeigen wir Ihnen, wie man eine Node.js-runtime im Browser mithilfe von Webcontainern ausführt.

Module nutzen

Node.js verfügt mit den unter npm vorhandenen Modulen über eine einzigartige Sammlung von Bibliotheken und Funktionen. Wenn Sie diese auch im Browser nutzen, können sie clientseitigen Anwendungen zur Verfügung stehen.

Module mit CommonJS

Browserify

browserify

In Browsern ist die require('modules')-Methode nicht definiert, aber in Node.js schon. Mit Browserify können Sie Code schreiben, der require() auf die gleiche Weise verwendet wie in Node.js.

Hier ist eine Anleitung, wie man Browserify auf der Kommandozeile verwendet, um eine einfache Datei namens main.js zusammen mit all ihren Abhängigkeiten zu bündeln:

main.js 
var unique = require('uniq');

var data = [1, 2, 2, 3, 4, 5, 5, 5, 6];

console.log(unique(data));

Installieren Sie das uniq-Modul mit npm: 

npm install uniq

Jetzt werden alle benötigten Module in eine einzige Datei namens bundle.js „gebündelt“: 

browserify main.js -o bundle.js

Browserify parst den Abstrakten Syntaxbaum, damit alle in require() benötigten dependencies enthalten sind.

Fügen Sie einen script-Tag mit einer Referenz auf das Modul in Ihr HTML ein:

im HTML-Dokument 
 <script src="bundle.js"></script>

Webpack

webpack.js.org

Webpack wird zum Kompilieren von JavaScript-Modulen verwendet. Nach der Installation können Sie mit Webpack entweder über seine CLI oder API interagieren.

Auf dieser Seite webpack.js.org/getting-started können Sie mit stackblitz.com direkt in einer Live-Demo herumprobieren und lernen.

nodular.js

nodular.js

Nodular unterbricht die Skriptausführung (wirft eine Exception), wenn es auf eine Anforderung stößt, lädt das benötigte Modul asynchron und versucht, das unterbrochene Skript "fortzusetzen", indem es seinen Quellcode mit Magie bearbeitet. Das funktioniert nicht, wenn die Anforderung in Kontrollstrukturen vorkommt oder Teil von komplexen Ausdrücken ist.[1]

Headless Server

muss fertiggestellt werden.


Fazit

Auf freecodecamp.org wird gezeigt, wie man eine IDE aufbaut, in der der Visual Studio Editor durch mehrere Extensions erweitert wird. So kann man mit React Webseiten entwickeln, muss diese Syntax aber erst in normales HTML umwandeln.[2]

Weblinks

  1. ↑ How to run Node.js (apps) in the browser? (cloudboost.io)
  2. ↑ JavaScript Tutorial – How to Set Up a Front End Development Project (freecodecamp.org)
Abgerufen von „http://wiki.selfhtml.org/index.php?title=Node.js_im_Browser_ausführen&oldid=92225“