Passer au contenu principal

Comprendre Babel, les polyfills et core-js

Pourquoi Babel ?

JavaScript évolue rapidement. Chaque nouvelle version du langage (ECMAScript) introduit des fonctionnalités utiles : let/const, arrow functions, async/await, Array.prototype.includes, etc.

Le problème ? Tous les navigateurs ne supportent pas immédiatement ces nouveautés. C’est là qu’intervient Babel.

 

Babel, c’est quoi ?

Babel est un transpilateur JavaScript. Contrairement à un compilateur classique (comme C → binaire), un transpilateur convertit du code d’une version du langage vers une autre version du même langage.

Par exemple : Babel peut transformer du code ES2022 vers un JavaScript compatible ES5, compris par des navigateurs comme Internet Explorer 11.

Exemple de transformation :

// Code source moderne
const sum = (a, b) => a + b;

// Code transpilé par Babel
var sum = function(a, b) {
  return a + b;
};

 

Et les polyfills dans tout ça ?

Certaines fonctionnalités JavaScript ne peuvent pas être transpilées, car elles dépendent des API natives du moteur JavaScript. Par exemple : Array.prototype.includes, Promise, Symbol, Object.entries, etc. C’est là qu’intervient le polyfill.

Qu’est-ce qu’un polyfill ?

Un polyfill est un morceau de code (souvent une fonction ou une bibliothèque) qui émule une fonctionnalité récente sur des environnements plus anciens.

Exemple de polyfill :

if (!Array.prototype.includes) {
  Array.prototype.includes = function(searchElement, fromIndex) {
    return this.indexOf(searchElement, fromIndex) !== -1;
  };
}

Les polyfills ne sont pas générés automatiquement par Babel. Pour cela, il faut utiliser une bibliothèque tierce comme core-js.

core-js : la bibliothèque de polyfills standard

core-js est une bibliothèque complète qui implémente les fonctions modernes de JavaScript, que Babel peut insérer dans votre code pour garantir la compatibilité.

Babel ne sait pas polyfiller par lui-même. Il peut orchestrer l’ajout de polyfills via @babel/preset-env en combinaison avec core-js. Voici comment configurer Babel pour insérer automatiquement les bons polyfills selon les navigateurs que vous ciblez :

// babel.config.js

{
  "presets": [
    [
      "@babel/preset-env",
      {
        "useBuiltIns": "entry", // ou "usage"
        "corejs": "3.22"
      }
    ]
  ]
}

@babel/preset-env est un preset intelligent qui analyse la liste des navigateurs que vous ciblez.

À partir de cette cible, il décide :

  • Quelles fonctionnalités JavaScript ne sont pas supportées par ces navigateurs.

  • Quelles transformations Babel doit appliquer (ex. transformer les flèches en fonctions classiques, les classes en fonctions prototypes, etc.).

  • Quels polyfills doivent être inclus (via core-js), selon votre option useBuiltIns.

Retour en haut