Babel est un compilateur JavaScript
Babel est une chaîne d’outils principalement utilisée pour convertir le code ECMAScript 2015+ en une version rétrocompatible de JavaScript dans les navigateurs ou environnements actuels et anciens. Voici les principales choses que Babel peut faire pour vous :
- Syntaxe de transformation
- Fonctionnalités Polyfill manquantes dans votre environnement cible (via @babel/polyfill)
- Transformations de code source (codemods)
- Et plus encore ! (regardez ces vidéos pour trouver de l’inspiration)
// Babel Input: ES2015 arrow function.map((n) => n + 1);// Babel Output: ES5 equivalent.map(function(n) { return n + 1;});Pour un tutoriel génial sur les compilateurs, consultez le compilateur-super-minuscule, qui explique également comment Babel lui-même fonctionne à un niveau élevé.
ES2015 et au-delà
Babel prend en charge la dernière version de JavaScript via des transformateurs de syntaxe.
Ces plugins vous permettent d’utiliser une nouvelle syntaxe, dès maintenant sans attendre le support du navigateur. Consultez notre guide d’utilisation pour commencer.
JSX et React
Babel peut convertir la syntaxe JSX ! Consultez notre préréglage React pour commencer. Utilisez-le avec le package babel-sublime pour amener la coloration syntaxique à un tout autre niveau.
Vous pouvez installer ce préréglage avec
npm install --save-dev @babel/preset-react et ajouter @babel/preset-react à votre configuration Babel.
export default React.createClass({ getInitialState() { return { num: this.getRandomNumber() }; }, getRandomNumber() { return Math.ceil(Math.random() * 6); }, render() { return <div> Your dice roll: {this.state.num} </div>; }});En savoir plus sur JSX
Annotations de type (Flux et TypeScript)
Babel peut supprimer les annotations de type ! Consultez notre préréglage de flux ou notre préréglage TypeScript pour commencer. Gardez à l’esprit que Babel ne vérifie pas les types; vous devrez toujours installer et utiliser Flow ou TypeScript pour vérifier les types.
Vous pouvez installer le préréglage de flux avec
npm install --save-dev @babel/preset-flow// @flowfunction square(n: number): number { return n * n;}ou le préréglage typescript avec
npm install --save-dev @babel/preset-typescriptfunction Greeter(greeting: string) { this.greeting = greeting;}npm install --save-dev @babel/preset-typescriptfunction Greeter(greeting: string) { this.greeting = greeting;}En savoir plus sur Flow et TypeScript
Enfichable
Babel est construit à partir de plugins. Composez votre propre pipeline de transformation à l’aide de plugins existants ou écrivez le vôtre. Utilisez facilement un ensemble de plugins en utilisant ou en créant un préréglage. En savoir plus →
Créez un plugin à la volée avec astexplorer.net ou utilisez generator-babel-plugin pour générer un modèle de plugin.
// A plugin is just a functionexport default function ({types: t}) { return { visitor: { Identifier(path) { let name = path.node.name; // reverse the name: JavaScript -> tpircSavaJ path.node.name = name.split('').reverse().join(''); } } };}Débogable
Prise en charge de la carte source afin que vous puissiez déboguer facilement votre code compilé.
Conforme aux spécifications
Babel essaie de rester fidèle au standard ECMAScript, autant que raisonnablement possible. Il peut également avoir des options spécifiques pour être plus conforme aux spécifications en tant que compromis sur les performances.
Compact
Babel essaie d’utiliser le moins de code possible sans dépendre d’un runtime volumineux.
Cela peut être difficile à faire dans les cas, et il existe des options « lâches » pour des transformations spécifiques qui peuvent compromettre la conformité des spécifications pour la lisibilité, la taille du fichier et la vitesse.