Node.js
Node.JS mit ES6

Einführung

Node ES6 Support und Erstellung eines Projekts mit Babel

Die gesamte ES6-Spezifikation ist noch nicht vollständig implementiert, sodass Sie nur einige der neuen Funktionen nutzen können. Eine Liste der aktuell unterstützten ES6-Funktionen finden Sie unter http://node.green/

Seit NodeJS v6 gibt es ziemlich gute Unterstützung. Wenn Sie also NodeJS v6 oder höher verwenden, können Sie ES6 genießen. Möglicherweise möchten Sie jedoch auch einige der nicht veröffentlichten Funktionen und einige darüber hinaus verwenden. Dafür benötigen Sie einen Transpiler

Es ist möglich, einen Transpiler zur Laufzeit auszuführen und zu bauen, alle ES6-Funktionen und mehr zu verwenden. Der beliebteste Transpiler für JavaScript heißt Babel

Babel können Sie alle Funktionen von der ES6 Spezifikation und einige zusätzliche nicht-in-spec Features mit ‚Stufe-0‘ verwenden , wie import thing from 'thing statt var thing = require('thing')

Wenn wir ein Projekt erstellen wollten, in dem wir "stage-0" -Funktionen wie Import verwenden, müssten wir Babel als Transpiler hinzufügen. In Projekten, in denen React und Vue und andere CommonJS-basierte Muster verwendet werden, wird häufig die Stufe 0 implementiert.

Erstellen Sie ein neues Knotenprojekt

mkdir my-es6-app
cd my-es6-app
npm init

Installieren Sie das ES6-Preset und die Stufe 0

npm install --save-dev babel-preset-es2015 babel-preset-stage-2 babel-cli babel-register

Erstellen Sie eine neue Datei mit dem Namen server.js und fügen Sie einen einfachen HTTP-Server hinzu.

import http from 'http'

http.createServer((req, res) => {
  res.writeHead(200, {'Content-Type': 'text/plain'})
  res.end('Hello World\n')
}).listen(3000, '127.0.0.1')

console.log('Server running at http://127.0.0.1:3000/')

Beachten Sie, dass wir einen import http from 'http' Dies ist eine Stage-0-Funktion. Wenn dies funktioniert, bedeutet dies, dass der Transpiler ordnungsgemäß funktioniert.

Wenn Sie node server.js kann der Import nicht durchgeführt werden.

Erstellen Sie eine .babelrc-Datei im Stammverzeichnis Ihres Verzeichnisses, und fügen Sie die folgenden Einstellungen hinzu

{
  "presets": ["es2015", "stage-2"],
  "plugins": []
}

Sie können den Server jetzt mit dem node src/index.js --exec babel-node

Es ist keine gute Idee, einen Transpiler zur Laufzeit in einer Produktions-App auszuführen. Wir können jedoch einige Skripte in package.json implementieren, um die Arbeit mit ihnen zu erleichtern.

"scripts": {
    "start": "node dist/index.js",
    "dev": "babel-node src/index.js",
    "build": "babel src -d dist",
    "postinstall": "npm run build"
  },

Das obige wird bei npm install den transpiled-Code in das dist-Verzeichnis erstellen, damit npm start den transpiled-Code für unsere Produktions-App verwenden kann.

npm run dev bootet die Server- und Babel-Laufzeitumgebung. Dies ist in Ordnung und wird bevorzugt, wenn Sie lokal an einem Projekt arbeiten.

Wenn Sie noch einen Schritt weiter gehen, können Sie nodemon npm install nodemon --save-dev , um nach Änderungen zu npm install nodemon --save-dev die Knoten-App neu.

Dies beschleunigt die Arbeit mit Babel und NodeJS. Aktualisieren Sie in Ihrer package.json das Skript "dev", um nodemon zu verwenden

"dev": "nodemon src/index.js --exec babel-node",

Verwenden Sie JS es6 in Ihrer NodeJS-App

JS es6 (auch als es2015 bekannt) umfasst eine Reihe neuer Funktionen für JS, die darauf abzielen, es intuitiver zu machen, wenn Sie OOP verwenden oder sich modernen Entwicklungsaufgaben stellen.

Voraussetzungen:

1. Schauen Sie sich die neuen es6-Funktionen unter http://es6-features.org an - es kann Ihnen klarstellen, ob Sie es wirklich in Ihrer nächsten NodeJS-App verwenden möchten

2. Überprüfen Sie den Kompatibilitätsgrad Ihrer Knotenversion unter http://node.green

3. Wenn alles in Ordnung ist - lass uns einlernen!

Hier ist ein sehr kurzes Beispiel einer einfachen hello world App mit JS es6

'use strict'

class Program
{
    constructor()
    {
        this.message = 'hello es6 :)';
    }

    print()
    {
        setTimeout(() =>
        {
            console.log(this.message);
            
            this.print();

        }, Math.random() * 1000);
    }
}

new Program().print();

Sie können dieses Programm ausführen und beobachten, wie dieselbe Nachricht immer und immer wieder gedruckt wird.

Jetzt .. lassen Sie es Zeile für Zeile aufteilen:

'use strict'

Diese Zeile ist tatsächlich erforderlich, wenn Sie js es6 verwenden möchten. strict Modus weist absichtlich eine andere Semantik als der normale Code auf (bitte lesen Sie mehr dazu im MDN - https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Strict_mode)

class Program

Unglaublich - ein class ! Nur zur schnellen Referenz - vor es6 bestand die einzige Möglichkeit, eine Klasse in js zu definieren, mit dem Schlüsselwort ... function !

function MyClass() // class definition
{

}

var myClassObject = new MyClass(); // generating a new object with a type of MyClass

Bei Verwendung von OOP ist eine Klasse eine sehr grundlegende Fähigkeit, die den Entwickler dabei unterstützt, einen bestimmten Teil eines Systems darzustellen (Code zu zerlegen ist wichtig, wenn der Code größer wird. Beispiel: beim Schreiben von serverseitigem Code)

constructor()
{
    this.message = 'hello es6 :)';
}

Sie müssen zugeben - das ist ziemlich intuitiv! Dies ist der C'tor meiner Klasse - diese einzigartige "Funktion" wird jedes Mal ausgeführt, wenn ein Objekt aus dieser bestimmten Klasse erstellt wird (in unserem Programm - nur einmal).

print()
{
    setTimeout(() => // this is an 'arrow' function
    {
        console.log(this.message);
        
        this.print(); // here we call the 'print' method from the class template itself (a recursion in this particular case)

    }, Math.random() * 1000);
}

Weil print im Klassenbereich definiert ist - es ist eigentlich eine Methode - die entweder vom Objekt der Klasse oder von innerhalb der Klasse selbst aufgerufen werden kann!

Bis jetzt haben wir unsere Klasse definiert .. Zeit, um sie zu benutzen:

new Program().print();

Welches ist wirklich gleich:

var prog = new Program(); // define a new object of type 'Program'

prog.print(); // use the program to print itself

Zusammenfassend: JS es6 kann Ihren Code vereinfachen - intuitiver und verständlicher machen (im Vergleich zur vorherigen Version von JS). Sie können versuchen, einen vorhandenen Code neu zu schreiben und den Unterschied zu erkennen

GENIESSEN :)