Le langage avance chaque année, les navigateurs installés sur les machines des visiteurs beaucoup moins vite. Écrire du code moderne et le servir à tout le monde suppose donc un traducteur entre les deux.
Babel occupe ce poste depuis que les nouveautés du langage ont commencé à arriver plus vite que leur adoption.
Définition
Babel est un outil de Transpilation : il lit du JavaScript, le représente sous forme d'arbre, applique une série de transformations, puis réécrit un fichier JavaScript équivalent que des moteurs plus anciens acceptent.
// babel.config.json
{
"presets": [
["@babel/preset-env", { "targets": "> 0.5%, last 2 versions, not dead" }]
]
}
// Entrée
const saluer = (nom = "le monde") => "Bonjour " + nom + " !";
// Sortie possible pour une cible ancienne
var saluer = function saluer(nom) {
if (nom === undefined) nom = "le monde";
return "Bonjour " + nom + " !";
};Le champ targets décide de tout. Il décrit les navigateurs à servir, et Babel n'applique que les transformations réellement nécessaires pour eux : viser large produit du code plus long, viser récent ne transforme presque rien.
Ce que Babel traduit, et ce qu'il ne traduit pas
La distinction est la source de confusion la plus fréquente autour de cet outil.
- La syntaxe, oui : une Fonction fléchée, une Destructuration, un Template literal (gabarit de chaîne), le Chaînage optionnel (?.) sont réécrits en constructions plus anciennes.
- Les méthodes manquantes, non : si le moteur cible ne connaît pas
Array.prototype.at, aucune réécriture de syntaxe ne l'inventera. Il faut un Polyfill, que Babel sait injecter à la demande. - Les types, effacés : le préréglage TypeScript retire les annotations sans vérifier quoi que ce soit. La vérification reste le travail du compilateur TypeScript.
Babel sert aussi hors compatibilité : c'est lui qui traduit le JSX de React en appels de fonction ordinaires. Un projet moderne l'utilise parfois uniquement pour cela.
Sa place dans un projet
Babel s'invoque rarement à la main. Il s'insère dans un Bundler (empaqueteur), sous forme de loader chez Webpack ou de greffon ailleurs, et le fichier de configuration reste le seul point de contact.
Des outils écrits dans des langages compilés remplissent aujourd'hui le même office beaucoup plus vite, et plusieurs chaînes de build les utilisent par défaut. Babel garde l'avantage sur les cas particuliers, grâce à un écosystème de greffons que personne n'a rattrapé.
Questions fréquentes
Babel est-il encore nécessaire ?
Moins qu'avant. Les navigateurs à jour comprennent la quasi-totalité du langage moderne, et une application destinée à un public récent peut s'en passer. Il redevient indispensable dès qu'un vieux navigateur figure dans les cibles, ou qu'une syntaxe non encore standardisée est utilisée.
Pourquoi mon code transpilé plante-t-il quand même ?
Parce que l'erreur porte sur une méthode et non sur une syntaxe. Un message du type « n'est pas une fonction » sur un navigateur ancien désigne presque toujours une méthode absente du moteur, donc un polyfill oublié. Regardez le nom cité dans l'erreur avant de toucher à la configuration.
Quelle différence avec le compilateur TypeScript ?
Les deux savent produire du JavaScript ancien, mais un seul vérifie les types. Babel se contente de retirer les annotations, ce qui va très vite et laisse passer les erreurs de typage ; le compilateur officiel les signale. Beaucoup de projets combinent les deux, l'un pour la vérification, l'autre pour la sortie.