Node.js
Node.JS met ES6

Invoering

Node ES6 Ondersteuning en een project maken met Babel

De hele ES6-specificatie is nog niet volledig geïmplementeerd, dus je kunt alleen enkele van de nieuwe functies gebruiken. U kunt een lijst met de huidige ondersteunde ES6-functies bekijken op http://node.green/

Sinds NodeJS v6 is er behoorlijk goede ondersteuning. Dus als u NodeJS v6 of hoger gebruikt, kunt u genieten van ES6. Mogelijk wilt u echter ook enkele van de functies die nog niet zijn uitgebracht, gebruiken. Hiervoor moet u een transpiler gebruiken

Het is mogelijk om een transpiler tijdens runtime en build uit te voeren, om alle ES6-functies en meer te gebruiken. De meest populaire transpiler voor JavaScript heet Babel

Met Babel kunt u alle functies van de ES6-specificatie gebruiken en enkele extra niet-in-spec functies met 'stage-0' zoals import thing from 'thing plaats van var thing = require('thing')

Als we een project wilden maken waarbij we 'stage-0'-functies zoals import gebruiken, zouden we Babel als transpiler moeten toevoegen. Je zult zien dat projecten met behulp van react en Vue en andere op commonJS gebaseerde patronen vrij vaak fase-0 implementeren.

maak een nieuw knooppuntproject

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

Installeer babel de ES6-preset en stage-0

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

Maak een nieuw bestand met de naam server.js en voeg een eenvoudige HTTP-server toe.

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/')

Merk op dat we een import http from 'http' dit is een fase-0-functie en als het werkt, betekent dit dat we de transpiler correct hebben laten werken.

Als u node server.js , zal het mislukken niet weten hoe de import te verwerken.

Maak een .babelrc-bestand in de hoofdmap van uw map en voeg de volgende instellingen toe

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

u kunt de server nu uitvoeren met node src/index.js --exec babel-node

Het is geen goed idee om een transpiler tijdens runtime op een productie-app uit te voeren. We kunnen echter enkele scripts in ons pakket.json implementeren om het werken met deze te vergemakkelijken.

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

Bovenstaande zal bij npm install de transpiled code bouwen naar de dist directory zodat npm start de transpiled code kan gebruiken voor onze productie-app.

npm run dev zal de server en babel runtime opstarten, wat prima is en de voorkeur heeft wanneer lokaal aan een project wordt gewerkt.

Als je nog een stap verder gaat, kun je vervolgens nodemon npm install nodemon --save-dev om op veranderingen te letten en vervolgens de knooppunt-app opnieuw opstarten.

Dit versnelt echt het werken met babel en NodeJS. Werk in uw package.json het "dev" -script bij om nodemon te gebruiken

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

Gebruik JS es6 op uw NodeJS-app

JS es6 (ook bekend als es2015) is een set nieuwe functies voor JS-taaldoel om het meer intuïtief te maken bij het gebruik van OOP of bij moderne ontwikkelingstaken.

Vereisten:

1. Bekijk de nieuwe es6-functies op http://es6-features.org - het kan je duidelijk maken of je het echt wilt gebruiken in je volgende NodeJS-app

2. Controleer het compatibiliteitsniveau van uw knooppuntversie op http://node.green

3. Als alles in orde is, laten we coderen!

Hier is een heel kort voorbeeld van een eenvoudige hello world app met 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();

U kunt dit programma uitvoeren en observeren hoe hetzelfde bericht steeds opnieuw wordt afgedrukt.

Nu .. laten we het regel voor regel uitsplitsen:

'use strict'

Deze regel is eigenlijk vereist als u van plan bent om js es6 te gebruiken. strict modus heeft opzettelijk een andere semantiek dan de normale code (lees hier meer over op MDN - https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Strict_mode)

class Program

Ongelooflijk - een class trefwoord! Voor een snelle referentie - vóór es6 was de enige manier om een klasse in js te definiëren het trefwoord ... function !

function MyClass() // class definition
{

}

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

Bij het gebruik van OOP is een klasse een zeer fundamentele vaardigheid die de ontwikkelaar helpt een specifiek deel van een systeem weer te geven (het afbreken van code is cruciaal wanneer de code groter wordt ... bijvoorbeeld: bij het schrijven van server-side code)

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

Je moet toegeven - dit is behoorlijk intuïtief! Dit is de c'tor van mijn klasse - deze unieke "functie" zal elke keer voorkomen dat een object wordt gemaakt van deze specifieke klasse (in ons programma - slechts eenmaal)

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);
}

Omdat print is gedefinieerd in het klassenbereik - het is eigenlijk een methode - die kan worden opgeroepen vanuit het object van de klasse of vanuit de klasse zelf!

Dus .. tot nu toe hebben we onze klasse gedefinieerd .. tijd om het te gebruiken:

new Program().print();

Dat is echt gelijk aan:

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

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

Concluderend: JS es6 kan uw code vereenvoudigen - intuïtiever en eenvoudiger te begrijpen maken (vergeleken met de vorige versie van JS) .. u kunt proberen een bestaande code van u opnieuw te schrijven en het verschil zelf te zien

GENIETEN :)