Babel (prononcé “babble”) est un transpileur qui vous permet de bénéficier des nouvelles syntaxes et fonctionnalités de JavaScript tout en prenant en charge les anciennes versions des navigateurs.
Anciennement appelé “6to5”, Babel était un outil qui permettait de convertir le code JavaScript de la norme “ES6” (sortie en 2015) en code équivalent “ES5” (2009), afin de supporter une large gamme de navigateurs. Son créateur initial, Sebastian McKenzie, a renommé l’outil en “Babel” pour éviter de devoir changer de nom chaque année 🙂
Les versions d’ECMAScript sont désormais nommées d’après l’année de leur sortie, dans le but de favoriser la prise en charge rapide des nouvelles fonctionnalités (ES2015, ES2016…).
En résumé, Babel vous permet de :
- Utiliser de nouvelles fonctionnalités de JavaScript.
- Prendre en charge les anciens navigateurs.
- Transformer certaines parties de votre code.
- Et bien plus encore, comme TypeScript et JSX.
Pour commencer, vous aurez besoin de Node.js ou de NVM pour installer NPM, le gestionnaire de paquets. Ensuite, vous devrez vous rendre à la racine de votre projet et créer un fichier package.json en utilisant la commande suivante :
npm initRépondez simplement aux questions qui vous sont posées.
Une fois cela fait, vous devrez installer deux dépendances :
@babel/clipour pouvoir transpiler via la ligne de commande.@babel/corepour transformer votre code source en code distribuable.
Vous devriez maintenant avoir deux nouvelles clés dans votre package.json.
Pour faciliter l’exécution des commandes ultérieures, nous allons ajouter un script à notre package.json. Les commandes seront accessibles via npm run build et npm run watch.
La commande de build est construite comme suit : babel <dossier-source> -d <dossier-destination>. Modifiez les noms de dossiers en fonction de votre structure. Babel prendra ensuite votre dossier source et transpilera tous les fichiers .js dans le dossier de destination. Il vous suffira alors d’importer les fichiers transpilés dans votre build final.
Vous pouvez également ajouter un script “watch” qui observera les changements dans vos fichiers sources et les transpilera automatiquement à chaque modification. Vous pouvez également activer le support des “source maps” pour faciliter le mappage des lignes de code d’origine dans le fichier source.
Une fois l’installation terminée, vous devrez configurer Babel pour lui indiquer ce que vous souhaitez qu’il fasse. Nous avons plusieurs options de configuration, mais nous utiliserons la plus simple :
- Créez un fichier .babelrc.json.
“RC” peut signifier plusieurs choses : run commands, run control, runtime configuration ou resource control.
- Liste des différents presets et plugins dans ce fichier .json.
- Un plugin permet à Babel de comprendre une nouvelle syntaxe et de la transpiler. Notez que tous les plugins ne sont pas des transpilers.
- Un preset est un ensemble de plugins permettant de prendre en charge un ensemble de fonctionnalités.
Nous utiliserons le preset “babel-preset-env”. Pour l’installer, exécutez la commande suivante :
npm install @babel/preset-env --save-devVous devrez ensuite ajouter ce preset à votre fichier .babelrc.json. Vous pouvez également configurer ce preset directement dans le fichier .babelrc.json, consultez la documentation pour plus d’informations.
Ce preset est particulier car il utilise une détection automatique pour déterminer quelles fonctionnalités transpiler ou non. Pour cela, il utilise une table de compatibilité basée sur plusieurs sources telles que browserslist, compat-table et electron-to-chromium.
Pour bénéficier de cette détection automatique, vous devrez spécifier une liste de navigateurs à prendre en charge. Si vous ne spécifiez pas de navigateurs/versions, le preset transpilera tout le code ES2015+ (ce qui peut entraîner un bundle plus volumineux).
Dans notre exemple, nous avons spécifié que nous souhaitons prendre en charge tous les navigateurs représentant plus de 0,5% d’utilisation dans le monde, les deux dernières versions des navigateurs récents, ainsi que tous les navigateurs encore utilisés. Cela couvre la plupart des cas et correspond à l’option “defaults”. Vous pouvez consulter la documentation pour une liste exhaustive des options.
Et voilà ! Vous pouvez maintenant écrire du code JavaScript moderne tout en prenant en charge les anciens navigateurs. Babel est un outil personnalisable, n’hésitez pas à ajouter et à configurer des plugins et des presets pour correspondre à vos besoins.
Voyons maintenant en détail le fonctionnement de Babel.
Babel est divisé en trois parties distinctes :
Parser
Le parser lit votre code source et génère un Abstract Syntax Tree (AST), une représentation de votre code sous forme d’arbre. Chaque nœud de l’AST représente une partie de votre programme et est utilisé par d’autres programmes pour effectuer différentes tâches.
Transformations
Après avoir généré l’AST initial, Babel utilise un “visitor” pour parcourir l’AST et y apporter des modifications. Ce processus est appelé “Traversal”. Le but est de traverser l’arbre tout en conservant le sens de votre code.
Pourquoi est-il important de conserver le sens de votre code ? Imaginons que nous ayons une fonction qui renvoie un tableau et que nous déstructurons les deux premiers éléments du résultat :
const [x, y] = calculateCoordinates();Maintenant, imaginons que nous fassions la même opération à l’intérieur d’une fonction :
function getXandY() {
const [x, y] = calculateCoordinates();
}Sans tenir compte du sens de notre code, Babel pourrait générer du code invalide :
function getXandY() {
x = calculateCoordinates()[0];
y = calculateCoordinates()[1];
}Ce code est incorrect car la fonction getXandY attend une expression en tant qu’argument. JavaScript générerait une exception de type SyntaxError car nous déclarons des variables et effectuons des affectations.
Grâce à l’analyse statique, Babel est capable de comprendre le sens de votre code et génèrera plutôt ceci :
function getXandY() {
const [x, y] = calculateCoordinates();
}La transformation peut être résumée comme suit :
- Entrée : AST
- Sortie : AST’ (modifié)
Par exemple, voici une modification que l’on peut apporter à l’AST pendant cette étape :
input: var a = 1;
output: let a = 1;Il est important de noter que ces modifications se font toujours sous forme d’AST et non de code source.
Generator
À partir de l’AST modifié, Babel génère le code source final. Il conserve également le style de votre code (indentation, guillemets simples ou doubles) lors du processus de génération. Ce processus est appelé “Style Inference”.
Schéma
Voici un schéma représentant le fonctionnement de Babel, avec le parser, le transformer et le générateur :
Webpack
Lorsque votre application comporte de nombreux fichiers .js, il est recommandé d’utiliser un bundler tel que Webpack, Parcel ou Rollup.
Il est possible d’utiliser Babel avec ces bundlers. Pour Webpack, par exemple, il vous suffit d’ajouter un loader à vos règles :
module: {
rules: [
{
test: /.js$/,
exclude: /node_modules/,
use: {
loader: 'babel-loader'
}
}
]
}Assurez-vous d’installer le module babel-loader pour Webpack.
Ressources
Voici quelques ressources utiles pour en savoir plus sur Babel :
- La documentation de Babel
- Les propositions du TC39
- Sebastian McKenzie, le créateur initial de Babel, a annoncé la sortie de Rome, un outil expérimental tout-en-un destiné à remplacer les nombreux outils existants en JavaScript.
Rome, un outil expérimental de JavaScript, est désormais open source et disponible pour les contributeurs. Il est loin d’être prêt pour la production et de nombreuses fonctionnalités sont encore manquantes. Il n’y a pas encore de publication sur npm, de documentation, de site web ou d’intégrations disponibles. Venez nous aider à les construire ! Lien vers tweet
Merci d’avoir lu cet article ! J’espère que vous l’avez apprécié. N’hésitez pas à me faire part de vos retours. Si vous repérez une erreur, cliquez sur “Edit on GitHub” en bas de la page !
