Babel pour JavaScript (Node.js) : guide complet avec exemples

Qu'est-ce que Babel et pourquoi en a-t-on besoin ?

\n\n

Babel est un puissant transpileur (compilateur) pour JavaScript qui permet aux développeurs d'écrire du code dans les versions les plus récentes d'ECMAScript (ES6, ES7, ES8, ES9, ES10, ES11, ES12 et supérieur) et de le convertir en JavaScript rétrocompatible, capable de s'exécuter dans les anciens navigateurs et environnements d'exécution (par exemple, Node.js versions inférieures à 12).

\n\n

Le problème principal que Babel résout est le fossé entre les nouvelles fonctionnalités du langage (fonctions fléchées, async/await, déstructuration, classes, modules, chaînage optionnel, etc.) et leur prise en charge dans les environnements d'exécution réels. Babel agit comme un pont, permettant aux développeurs de profiter de tous les avantages du JavaScript moderne sans avoir à attendre que tous les navigateurs soient mis à jour.

\n\n

Babel se compose de trois composants principaux :

\n

\n
• Le noyau (@babel/core) — le moteur principal qui analyse le code, le transforme et génère un nouveau code.
\n
• Les plugins — des modules individuels, chacun responsable de la transformation d'une construction syntaxique spécifique (par exemple, un plugin pour les fonctions fléchées, pour async/await).
\n
• Les presets — des ensembles de plugins préconfigurés (par exemple, @babel/preset-env, @babel/preset-react).
\n

\n\n

Babel est également utilisé pour la transpilation de TypeScript, JSX (React), Flow et d'autres extensions de JavaScript.

\n\n

Installation de Babel

\n\n

Babel s'installe via npm (Node Package Manager). Pour commencer, vous aurez besoin de Node.js version 12 ou supérieure.

\n\n

Créez un nouveau projet et initialisez-le :

\n

mkdir my-babel-project\ncd my-babel-project\nnpm init -y

\n\n

Installez les paquets principaux de Babel :

\n

npm install --save-dev @babel/core @babel/cli @babel/preset-env

\n\n

Analysons ce que nous avons installé :

\n

\n
• @babel/core — le noyau de Babel. Sans lui, rien ne fonctionnera.
\n
• @babel/cli — l'interface en ligne de commande, permettant d'exécuter Babel depuis le terminal.
\n
• @babel/preset-env — le preset le plus important, qui détermine automatiquement les plugins nécessaires en fonction des environnements cibles (navigateurs ou versions de Node.js).
\n

\n\n

Pour travailler avec React, installez en plus :

\n

npm install --save-dev @babel/preset-react

\n\n

Pour TypeScript :

\n

npm install --save-dev @babel/preset-typescript

\n\n

Démarrage rapide avec un exemple de code

\n\n

Créez un fichier de configuration Babel (babel.config.json ou .babelrc) à la racine du projet :

\n

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

\n\n

Créez un fichier src/index.js avec du code moderne :

\n

// src/index.js\nconst greet = (name) => {\n  return `Hello, ${name}!`;\n};\n\nconst users = ['Alice', 'Bob', 'Charlie'];\nconst greetings = users.map(user => greet(user));\n\nconsole.log(greetings);\n\n// Utilisation de async/await\nconst fetchData = async () => {\n  const data = await Promise.resolve({ message: 'Success' });\n  console.log(data.message);\n};\n\nfetchData();

\n\n

Compilez maintenant le code avec Babel :

\n

npx babel src --out-dir dist

\n\n

Après l'exécution de la commande, un fichier index.js avec le code transformé apparaîtra dans le dossier dist :

\n

// dist/index.js\n"use strict";\n\nvar greet = function greet(name) {\n  return "Hello, ".concat(name, "!");\n};\n\nvar users = ['Alice', 'Bob', 'Charlie'];\nvar greetings = users.map(function (user) {\n  return greet(user);\n});\n\nconsole.log(greetings);\n\nvar fetchData = async function fetchData() {\n  var data = await Promise.resolve({ message: 'Success' });\n  console.log(data.message);\n};\n\nfetchData();

\n\n

Notez