Node.js
Node.JS con ES6

introduzione

Nodo ES6 Supporto e creazione di un progetto con Babel

L'intera specifica ES6 non è stata ancora implementata nella sua interezza, quindi sarà possibile utilizzare solo alcune delle nuove funzionalità. Puoi vedere un elenco delle funzionalità ES6 attualmente supportate su http://node.green/

Dal momento che NodeJS v6 ha avuto un supporto abbastanza buono. Pertanto, se si utilizza NodeJS v6 o versione successiva, è possibile utilizzare ES6. Tuttavia, potresti anche voler utilizzare alcune delle funzioni inedite e alcune da oltre. Per questo dovrai usare un transpiler

È possibile eseguire un transpiler in fase di esecuzione e creare, utilizzare tutte le funzionalità di ES6 e altro ancora. Il traspiatore più popolare per JavaScript si chiama Babel

Babel ti consente di utilizzare tutte le funzionalità delle specifiche ES6 e alcune funzionalità aggiuntive non specificate con "stage-0", ad esempio import thing from 'thing invece di var thing = require('thing')

Se volessimo creare un progetto in cui usassimo funzionalità 'stage-0' come l'importazione, avremmo bisogno di aggiungere Babel come traspiatore. Vedrai i progetti usando react e Vue e altri pattern basati su CommonJS implementeranno lo stage-0 abbastanza spesso.

crea un nuovo progetto di nodo

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

Installa babel sul preset ES6 e sullo stage 0

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

Crea un nuovo file chiamato server.js e aggiungi un server HTTP di base.

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

Nota che usiamo un import http from 'http' questa è una funzione di stage-0 e se funziona significa che abbiamo il transpiler che funziona correttamente.

Se si esegue node server.js non riuscirà a sapere come gestire l'importazione.

Creare un file .babelrc nella directory principale della directory e aggiungere le seguenti impostazioni

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

ora puoi eseguire il server con il node src/index.js --exec babel-node

Completare l'operazione non è una buona idea eseguire un transpiler in fase di esecuzione su un'app di produzione. Tuttavia, possiamo implementare alcuni script nel nostro package.json per semplificare il lavoro.

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

Quanto sopra sopra npm install il codice transpiled nella directory dist consentendo a npm start a usare il codice transpiled per la nostra app di produzione.

npm run dev avvierà il server e il runtime di babel che va bene e preferito quando si lavora su un progetto localmente.

Andando avanti, è possibile installare nodemon npm install nodemon --save-dev per controllare le modifiche e quindi riavviare l'app nodo.

Questo velocizza davvero il lavoro con Babel e NodeJS. In you package.json basta aggiornare lo script "dev" per usare nodemon

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

Usa JS es6 sulla tua app NodeJS

JS es6 (noto anche come es2015) è un insieme di nuove funzionalità del linguaggio JS volte a renderlo più intuitivo quando si utilizza OOP o mentre si affrontano le attività di sviluppo moderne.

Prerequisiti:

1. Scopri le nuove funzionalità di es6 su http://es6-features.org - potrebbe chiarirti se hai intenzione di usarlo nella tua prossima app NodeJS

2. Verifica il livello di compatibilità della versione del tuo nodo su http://node.green

3. Se tutto va bene, facciamo il codice!

Ecco un esempio molto breve di una semplice app hello world con 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();

È possibile eseguire questo programma e osservare come stampa lo stesso messaggio più e più volte.

Ora .. lasciamolo giù riga per riga:

'use strict'

Questa linea è effettivamente necessaria se si intende utilizzare js es6. strict modalità strict , intenzionalmente, ha una semantica diversa dal codice normale (si prega di leggere di più su MDN - https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Strict_mode)

class Program

Incredibile: una parola chiave di class ! Solo per un rapido riferimento - prima di es6 l'unico modo per definire una classe in js era con la parola chiave ... function !

function MyClass() // class definition
{

}

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

Quando si utilizza OOP, una classe è un'abilità fondamentale che aiuta lo sviluppatore a rappresentare una parte specifica di un sistema (la decomposizione del codice è cruciale quando il codice diventa più grande .. ad esempio: quando si scrive il codice lato server)

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

Devi ammettere che è abbastanza intuitivo! Questo è l'indice della mia classe - questa "funzione" unica si verificherà ogni volta che un oggetto viene creato da questa particolare classe (nel nostro programma - solo una volta)

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

Perché la stampa è definita nell'ambito della classe - in realtà è un metodo - che può essere invocato dall'oggetto della classe o dalla stessa classe!

Quindi .. fino ad ora abbiamo definito la nostra classe .. tempo di usarla:

new Program().print();

Che è veramente uguale a:

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

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

In conclusione: JS es6 può semplificare il tuo codice - renderlo più intuitivo e facile da capire (confrontandolo con la versione precedente di JS) .. potresti provare a riscrivere un tuo codice esistente e vedere la differenza per te stesso

GODERE :)