Node.js
Node.JS avec ES6

Introduction

Node ES6 Support et création d'un projet avec Babel

L'ensemble de la spécification ES6 n'est pas encore implémenté dans son intégralité, vous ne pourrez donc utiliser que certaines des nouvelles fonctionnalités. Vous pouvez voir une liste des fonctionnalités ES6 actuellement prises en charge sur http://node.green/

Depuis NodeJS v6, il y a eu un bon support. Donc, si vous utilisez NodeJS v6 ou supérieur, vous pouvez utiliser ES6. Cependant, vous souhaiterez peut-être également utiliser certaines fonctionnalités inédites et d'autres encore. Pour cela, vous devrez utiliser un transpiler

Il est possible d'exécuter un transpiler à l'exécution et de générer, pour utiliser toutes les fonctionnalités d'ES6 et plus encore. Le transpiler le plus populaire pour JavaScript s'appelle Babel

Babel vous permet d'utiliser toutes les fonctionnalités de la spécification ES6 et quelques fonctionnalités supplémentaires non spécifiées avec 'stage-0' comme import thing from 'thing quelque import thing from 'thing place de la var thing = require('thing')

Si nous voulions créer un projet où nous utiliserions des fonctionnalités telles que l'importation, nous devrons ajouter Babel en tant que transpiler. Vous verrez des projets utilisant react et Vue et d'autres patterns basés sur common JS implémentent assez souvent stage-0.

créer un nouveau projet de noeud

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

Installer babel le preset ES6 et stage-0

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

Créez un nouveau fichier appelé server.js et ajoutez un serveur HTTP de 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/')

Notez que nous utilisons un import http from 'http' il s'agit d'une fonctionnalité de niveau 0 et si cela fonctionne, cela signifie que le transpiler fonctionne correctement.

Si vous exécutez node server.js ne saurez pas comment gérer l'importation.

Créer un fichier .babelrc à la racine de votre répertoire et ajouter les paramètres suivants

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

vous pouvez maintenant exécuter le serveur avec le node src/index.js --exec babel-node

Terminer ce processus n'est pas une bonne idée d'exécuter un transpiler à l'exécution sur une application de production. Nous pouvons cependant implémenter des scripts dans notre package.json pour le rendre plus facile à utiliser.

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

L' npm install ci-dessus à npm install le code transpiled dans le répertoire dist, autorisez npm start à utiliser le code transpiled pour notre application de production.

npm run dev démarrera le serveur et le runel babel, ce qui est bien et préférable lorsque vous travaillez sur un projet en local.

En allant plus loin, vous pouvez installer nodemon npm install nodemon --save-dev pour surveiller les modifications, puis redémarrer l'application.

Cela accélère le travail avec babel et NodeJS. Dans vous package.json il suffit de mettre à jour le script "dev" pour utiliser nodemon

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

Utilisez JS es6 sur votre application NodeJS

JS es6 (également connu sous le nom es2015) est un ensemble de nouvelles fonctionnalités pour le langage JS visant à le rendre plus intuitif lors de l'utilisation de la POO ou lors de tâches de développement modernes.

Conditions préalables:

1. Consultez les nouvelles fonctionnalités d'es6 sur http://es6-features.org - cela pourrait vous aider si vous avez vraiment l'intention de l'utiliser sur votre prochaine application NodeJS

2. Vérifiez le niveau de compatibilité de votre version de noeud à l' adresse http://node.green

3. Si tout va bien, codons!

Voici un exemple très court d'une application simple hello world avec 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();

Vous pouvez exécuter ce programme et observer comment il imprime le même message encore et encore.

Maintenant, laissez le décomposer ligne par ligne:

'use strict'

Cette ligne est en fait requise si vous avez l'intention d'utiliser js es6. strict mode strict , intentionnellement, a une sémantique différente du code normal (veuillez en lire plus sur MDN - https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Strict_mode)

class Program

Incroyable - un mot class clé de class ! Juste pour une référence rapide - avant es6, la seule façon de définir une classe en js était d'utiliser le mot-clé ... function !

function MyClass() // class definition
{

}

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

Lors de l'utilisation de la POO, une classe est une capacité très fondamentale qui aide le développeur à représenter une partie spécifique d'un système (la décomposition du code est cruciale lorsque le code grossit .. par exemple: lors de l'écriture du code côté serveur)

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

Vous devez l'admettre - c'est assez intuitif! C'est le c'tor de ma classe - cette "fonction" unique se produira chaque fois qu'un objet est créé à partir de cette classe particulière (dans notre programme - une seule fois)

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

Parce que print est défini dans la portée de la classe - c'est en fait une méthode - qui peut être appelée à partir de l'objet de la classe ou de la classe elle-même!

Donc .. jusqu'à maintenant nous avons défini notre classe .. le temps de l'utiliser:

new Program().print();

Ce qui est vraiment égal à:

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

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

En conclusion: JS es6 peut simplifier votre code - le rendre plus intuitif et facile à comprendre (en comparaison avec la version précédente de JS). Vous pouvez essayer de réécrire votre code existant et voir la différence par vous-même.

PRENDRE PLAISIR :)