Aller au contenu principal

Qu'est-ce que Babel ?

Traduction Bêta Non Officielle

Cette page a été traduite par PageTurner AI (bêta). Non approuvée officiellement par le projet. Vous avez trouvé une erreur ? Signaler un problème →

Babel est un compilateur JavaScript​

Babel est une chaîne d'outils principalement utilisée pour convertir du code ECMAScript 2015+ en une version rétrocompatible de JavaScript fonctionnant dans les navigateurs et environnements actuels ou plus anciens. Voici ses principales fonctionnalités :

  • Transformer la syntaxe

  • Combler les fonctionnalités manquantes dans votre environnement cible (via des polyfills tiers comme core-js)

  • Transformer le code source (codemods)

  • Et bien plus ! (consultez ces vidéos pour inspiration)

JavaScript
// Babel Input: ES2015 arrow function
[1, 2, 3].map(n => n + 1);

// Babel Output: ES5 equivalent
[1, 2, 3].map(function(n) {
  return n + 1;
});
astuce

Pour un excellent tutoriel sur les compilateurs, découvrez the-super-tiny-compiler, qui explique aussi le fonctionnement général de Babel.

ES2015 et au-delà​

Babel prend en charge les dernières versions de JavaScript via des transformateurs de syntaxe.

Ces plugins vous permettent d'utiliser de nouvelles syntaxes dès maintenant, sans attendre la prise en charge par les navigateurs. Consultez notre guide d'utilisation pour commencer.

JSX et React​

Babel peut transformer la syntaxe JSX ! Utilisez notre preset React pour démarrer. Combinez-le avec babel-sublime pour une coloration syntaxique améliorée.

Installez ce preset avec :

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

et ajoutez @babel/preset-react à votre configuration Babel.

JSX
export default function DiceRoll(){
  const getRandomNumber = () => {
    return Math.ceil(Math.random() * 6);
  };

  const [num, setNum] = useState(getRandomNumber());

  const handleClick = () => {
    const newNum = getRandomNumber();
    setNum(newNum);
  };

  return (
    <div>
      Your dice roll: {num}.
      <button onClick={handleClick}>Click to get a new number</button>
    </div>
  );
};
astuce

Découvrez JSX

Annotations de type (Flow et TypeScript)​

Babel peut supprimer les annotations de type ! Utilisez notre preset Flow ou preset TypeScript. Notez que Babel ne vérifie pas les types : vous devrez utiliser Flow ou TypeScript pour cette tâche.

Installez le preset Flow avec :

npm install --save-dev @babel/preset-flow
JavaScript
// @flow
function square(n: number): number {
  return n * n;
}

ou le préréglage TypeScript avec

npm install --save-dev @babel/preset-typescript
JavaScript
function Greeter(greeting: string) {
  this.greeting = greeting;
}
astuce

En savoir plus sur Flow et TypeScript !

Extensible par plugins​

Babel est construit autour de plugins. Composez votre propre pipeline de transformation ou créez des plugins. Utilisez facilement des ensembles via des presets. En savoir plus →

Créez des plugins dynamiquement avec astexplorer.net ou utilisez generator-babel-plugin pour générer des modèles.

example-babel-plugin.js
// A plugin is just a function
export default function({ types: t }) {
  return {
    visitor: {
      Identifier(path) {
        let name = path.node.name; // reverse the name: JavaScript -> tpircSavaJ
        path.node.name = [...name]
          .reverse()
          .join("");
      },
    },
  };
}

Débogable​

Prise en charge des source maps pour déboguer facilement votre code compilé.

Conforme aux spécifications​

Babel respecte scrupuleusement le standard ECMAScript. Certaines options optimisent la conformité au détriment des performances.

Compact​

Babel génère un code minimal sans dépendre d'un runtime volumineux.

Cela peut être complexe : les options "assumptions" permettent d'échanger conformité contre lisibilité, taille ou vitesse.