social-open-icon
social-close-icon
Facebook Instagram Linkedin twitter Youtube

So richten Sie Babel in Node.js ein

Node.js ist derzeit eine der beliebtesten Back-End-Technologien. Es ist freundlich, stark und gut gepflegt und verschwindet nicht so schnell.

Damit Sie lernen, wie Sie es effektiv nutzen können, erstellen wir in diesem Artikel einen einfachen Server mithilfe eines Knotens mit Babel, der in unserem Code konfiguriert ist.

Aber bevor wir uns an den Aufbau unseres Servers machen, wollen wir mehr darüber erfahren, was Babel ist.

1. Was ist Babel?

babel ist ein Javascript-Compiler. Dies ist ein beliebtes Tool, das Ihnen hilft, die neuesten Funktionen der Programmiersprache JavaScript zu nutzen.

2. Warum Babel in Node.js verwenden?

Haben Sie jemals ein Repo-Backend geöffnet, das mit node.js/Express erstellt wurde – und das erste, was Sie sehen, ist eine ES6-Import- und Exportanweisung zusammen mit einigen anderen coolen ES6-Syntaxfunktionen?

Nun,babel macht alles möglich. Denken Sie daran, dass Babel ein beliebtes Tool ist, mit dem Sie die neuesten Javascript-Funktionen nutzen können. Und viele der heutigen Frameworks verwenden Babel unter der Haube, um ihren Code zu kompilieren.

Zum Beispiel können Knoten Importberichte nicht verwenden und ES6 sowie einige andere coole Funktionen der ES6-Syntax ohne die Hilfe von Compilern wie babel exportieren.

In diesem Tutorial zeige ich Ihnen, wie Sie Ihre Knotenanwendung schnell so einstellen, dass sie mit den meisten ES6-Syntaxen kompatibel ist.

3. Erstaunlich, oder?

Diese Richtlinie geht davon aus, dass Sie über die folgenden Elemente verfügen:

4. Grundkenntnisse von node.js

Knoten auf Ihrem Computer installiert

Code- oder Texteditor Ihrer Wahl

Starten

Lassen Sie uns die grundlegende Knotenanwendung festlegen, die wir für dieses Tutorial verwenden werden.

Erstellen Sie einen neuen Ordner. Für dieses Tutorial werde ich Mine Node-babel nennen. Fügen Sie nun einen Ordner zum Arbeitsbereich hinzu und öffnen Sie Ihr Terminal.

Lassen Sie uns das Paket files.json für unsere Anwendung initialisieren und erstellen:

NPM-Init.

Dieser Befehl zeigt einige Schritte der Einstellungen an, die wir so belassen möchten, wie sie sind. Drücken Sie also die Eingabetaste oder kehren Sie zu allen Einstellungen zurück, damit es ordnungsgemäß funktioniert.

Sobald es fertig ist, erstellen Sie eine neue Datei mit dem Namen „index.js“, die als unser Einstiegspunkt fungiert.

So richten Sie Babel ein und installieren es

Jetzt werden wir drei Pakete aus der Babel-Familie installieren:

NPM-Pakete für @ Babel / Cli, @ Babel / Core und @ Babel / Preset-Env Install

Zur Installation verwenden wir den folgenden Befehl, um das Paket zu installieren:

– Save-dev @ Babel / CLI @ Babel / Core @ Babel / Preset-env const server =

Wir möchten –Save-dev verwenden, um es als Abhängigkeit für die Entwicklung Ihres Moduls zu installieren. Nachdem Sie die Installation abgeschlossen haben, erstellen Sie eine neue Datei mit dem Namen.BelRC, um Babel zu konfigurieren.

Berühren Sie .BelRC.

Diese Datei enthält alle Optionen, die wir zu Babel hinzufügen möchten. Lassen Sie uns zunächst die Einstellungen verwenden, die ich normalerweise für die Entwicklung meiner Anwendung verwende. Sie können es kopieren und hinzufügen:

{
		"Preset": [
		    ["@ Babel / Env", {
		      "Target": {{
		        "Node": "Current"
		      }
		    }]
		  By,
		  "Plugin": [
		    "@ babel / plugin-proposal-class-class",
		    "@ Babel / Plugin-Proposal-Object-Spread"
		  ]
		}
	

Die obige Konfiguration verwende ich, um babel mitzuteilen, dass ich meine Import- und Exportanweisungen und die Klassenfunktionen sowie den Rest und die Verbreitung von Operatoren aus ES6 verwenden möchte.

Es ist erstaunlich? Machen wir weiter.

5. So richten Sie einen einfachen Server ein

Öffnen Sie nun die Datei „index.js“, die wir zuvor erstellt haben, und fügen Sie diesen Code hinzu, um einen einfachen Server zu generieren:

HTTP-Importe von „HTTP“;

http.createserver ((req, res) => http.createserver ((req, res) => http.createserver ((req, res) => http.createserver ((req, res) => http.createserver ((req
	res .en ('hello from the server');
	}). Listen (4001);

console.log (‚Server in Betrieb);

Standardserverexport;

Mit dem Beispielcode auf dem Server lauschen wir Port 4001 und senden uns dann jedes Mal, wenn wir den Port besuchen, die Antwort „Halo of the Server“.

Package.json-Skriptkonfiguration.

Wir haben jetzt einen einfachen Server. Um dies auszuführen, müssen wir unseren Code übersetzen, bevor wir mit einem Knoten gehen. Öffnen Sie dazu die Datei „Package.json“ und fügen Sie Build and Start Script hinzu:

"Scripts": {
	+ "Build": "babel Index.js -d Dist",
	    "Start": "NPM Run Build && Node Dist / Index.js"
	}

Unser Server ist mit diesem Befehl betriebsbereit:

NPM startet

Sie müssen diese Antwort erhalten, nachdem Sie Localhost aufgerufen haben: 4001

So verwenden Sie Nodemon, um Ihren Server im Auge zu behalten und ihn neu zu starten

Um zu verhindern, dass der Server selbst jedes Mal neu gestartet wird, wenn Sie Änderungen an Ihrer Anwendung vornehmen, müssen wir Nodemon installieren. Mit diesem Befehl können Sie Nodemon in Ihrer Anwendung installieren, um es als Dev Dependency zu installieren:

NPM-Installation –Save-dev nodemon

Und dann konfigurieren wir unser Paket package.json neu:

"Scripts": {
	   "Build": "babel Index.js -d Dist",
	   "Start": "NPM Run Build && Nodemon Dist / Index.js"
	}

Es ist erstaunlich, das ist nun der endgültige Code unserer Knotenanwendung und was Sie erhalten müssen, wenn Sie „NPM Start“ ausführen, um Ihren Server zu starten.

Wie Sie auf dem Bild oben sehen können, geht unser Server in Betrieb. Sie können jetzt Import- und Exportanweisungen aus der ES6-Syntax und andere außergewöhnliche Funktionen von ES6 als Rest und Operatorbereitstellung in Ihrer Knotenanwendung verwenden.

Fazit

In diesem Tutorial haben wir gelernt, wie wir mit Babel die außergewöhnliche ES6-Syntax in unserer Knotenanwendung verwenden.

Beachten Sie, dass Sie Ihrer .belrc-Datei weitere Konfigurationen hinzufügen können. Dies ist nicht auf das beschränkt, was wir in diesem Tutorial haben – zögern Sie also nicht, es zu ändern oder zu ändern.

Lassen Sie uns für Ihr nächstes Webentwicklungsprojekt zusammenkommen.

Planen Sie mit uns Ihre nächste Web- oder mobile Anwendungslösung. Teilen Sie uns Ihre Anforderungen mit und unser Team wird sich mit Ihnen in Verbindung setzen.