Ecrire du Javascript moderne avec Babel (ECMAScript ES2020)

De nombreuses nouveautés ont été intégrées au langage Javascript, notamment au cours des dernières années. Cependant elles ne sont pas encore complètement intégrées par les navigateurs, ce qui nécessite d’utiliser une sorte de traducteur.

En Javascript, c’est Babel qui s’occupe de ça. Babel vous permet d’utiliser de nombreuses fonctionnalités importantes telles que :

• Les exports et imports ;
• les arrow functions ;
• le spread operator ;
• les fonctions d’arrays telles que map et filter.

On utilisera toutes ces fonctionnalités très souvent car elles nous simplifient vraiment la vie en rentrant le code plus clair, plus court et plus modulable.

yarn add --dev @babel/core @babel/node @babel/preset-env

Une fois les composants de Babel installés, il faut lui indiquer votre configuration. Rien de bien compliqué, il suffit de créer un fichier .babelrc avec quelques informations succinctes.

touch .babelrc

La configuration la plus simple à saisir dans le fichier .babelrc est la suivante :

{
  "presets": [
    [
      "@babel/preset-env",
      {
        "targets": {
          "node": "current"
        }
      }
    ]
  ]
}

Pour tester le fonctionnement de Babel, il va falloir lui permettre de transpiler le code en temps réel en mode développement. Pour cela nous allons légèrement modifier la command npm dans la partie scripts du package.json.

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

Pour tester le bon fonctionnement de Babel, vous pouvez lancer la commande dans votre terminal.

npm run dev

Pour s’assurer que l’on peut bien utiliser les fonctions récentes, modifions le fichier index.js. On remplace :

const express = require('express') ;

par :

 import express from 'express' ;

On peut à nouveau lancer la commande pour lancer le mode développement dans le terminal et tout devrait fonctionner. Fécilitations, vous pouvez écrire du Javascript moderne et ça va grandement nous simplifier le travail !