Guide du débutant sur Babel

Cet article présente Babel, un compilateur JavaScript qui permet aux développeurs d’utiliser le JavaScript de nouvelle génération aujourd’hui.

Il peut être frustrant d’écrire du JavaScript lors de la création d’applications Web. Nous devons réfléchir aux fonctionnalités disponibles dans les navigateurs que nous ciblons et à ce qui se passe lorsqu’une fonctionnalité n’est pas implémentée. Certaines personnes recommanderaient simplement de ne pas l’utiliser, ce qui est une expérience douloureuse la plupart du temps si nous construisons quelque chose de compliqué.

Heureusement, certains outils nous permettent d’arrêter de nous soucier de ce qui est pris en charge et d’écrire le meilleur code possible. On les appelle transpileurs. Un transpileur est un outil qui prend le code source en entrée et produit un nouveau code source en sortie, avec une syntaxe différente mais sémantiquement aussi proche que possible — ou idéalement équivalente – de l’original.

Babel est à peu près le transpileur standard pour traduire JavaScript moderne (ES2015+) en implémentations compatibles qui s’exécutent dans les anciens navigateurs. C’est la solution parfaite si vous voulez simplement vous concentrer sur l’écriture de JavaScript.

Et bien que l’objectif principal de Babel soit de traduire les dernières normes d’ECMAScript(ES) pour les navigateurs anciens — ou parfois actuels —, il peut faire plus. Il existe un écosystème de préréglages et de plugins qui permettent également l’ajout de fonctionnalités non standard. Chaque plugin rend une nouvelle fonctionnalité / transformation disponible pour votre code, et les préréglages ne sont qu’une collection de plugins.

Mise en route

Il existe différentes façons de configurer Babel en fonction de votre projet et des outils que vous utilisez. Dans cet article, nous allons vous expliquer comment configurer Babel à l’aide de la CLI, bien que si vous utilisez un système de construction ou un framework, vous pouvez consulter des instructions spécifiques sur le site officiel. La plupart du temps, l’interface de ligne de commande est le moyen le plus rapide et le plus simple de démarrer, donc si vous êtes un utilisateur pour la première fois, n’hésitez pas à continuer.

La première étape pour configurer Babel dans un projet consiste à installer le package à l’aide de npm et à l’ajouter en tant que dépendance de développement. En supposant que vous avez un nœud de travail.environnement js déjà en place, il suffit d’exécuter ce qui suit dans votre terminal:

mkdir babel-testcd babel-testnpm init -ynpm install --save-dev babel-cli

Cela va créer un répertoire (babel-test) changer dans le répertoire, initialiser un projet npm (créant ainsi un fichier package.json) puis installer le babel-cli en tant que dépendance de développement.

Si vous avez besoin d’aide pour ce qui précède, veuillez consulter nos tutoriels sur l’installation de Node et le travail avec npm.

Ensuite, nous pouvons ouvrir package.json et ajouter une commande build à nos scripts npm:

"scripts": { "build": "babel src -d dist"}

Cela prendra les fichiers source du répertoire src et affichera le résultat dans un répertoire dist. Ensuite, nous pouvons l’exécuter comme:

npm run build

Mais attendez! Avant de lancer Babel, nous devons installer et configurer les plugins qui transformeront notre code. Le moyen le plus simple et le plus rapide de le faire est d’ajouter le préréglage Env, qui sélectionne les plugins appropriés en fonction des navigateurs cibles que vous indiquez. Il peut être installé en utilisant:

npm install babel-preset-env --save-dev

Créez ensuite un fichier .babelrc à la racine de votre projet et ajoutez le préréglage:

{ "presets": }

Le fichier .babelrc est l’endroit où vous mettez tous vos paramètres pour Babel. Vous l’utiliserez principalement pour configurer des préréglages et des plugins, mais beaucoup plus d’options sont disponibles. Vous pouvez consulter la liste complète sur la page de l’API Babel.

Veuillez noter que, selon votre système d’exploitation, les fichiers commençant par un point seront masqués par défaut. Si cela vous pose problème (ou si vous préférez simplement moins de fichiers), vous pouvez placer vos paramètres Babel dans le fichier package.json, sous une touche babel, comme ceci:

{ "name": "babel-test", "version": "1.0.0", "babel": { // config }}

Enfin, créons les répertoires et fichiers que Babel s’attend à trouver:

mkdir src dist

Et lui donner quelque chose à transformer:

let a = 1;let b = 2; = ;console.log(a);console.log(b);

Cet exemple utilise l’affectation de déstructuration pour échanger les valeurs de deux variables.

Exécution de Babel

Maintenant que vous avez une installation Babel prête à l’emploi, vous pouvez exécuter la commande build pour exécuter le processus de compilation:

npm run build

Cela prendra le code de src/main.js, le transformera en code ES5 et affichera le code transformé en dist/main.js.

Voici ce qu’il a produit:

"use strict";var a = 1;var b = 2;var _ref = ;a = _ref;b = _ref;console.log(a);console.log(b);

Comme vous pouvez le voir, let a été remplacé par var et Babel a introduit une variable temporaire (désignée par le trait de soulignement) pour faciliter l’échange.

Et c’est tout. Le code que vous écrivez dans le répertoire src sera traduit dans les versions précédentes de la langue. Par défaut, si vous n’ajoutez aucune option au préréglage, il chargera toutes les transformations. Vous pouvez également indiquer les navigateurs cibles comme suit:

{ "presets": } }] ]}

Cela chargera les transformations requises pour prendre en charge les deux dernières versions de chaque navigateur et Safari supérieures ou égales à la version 7. Vous pouvez trouver les options disponibles pour les navigateurs cibles dans le référentiel Browserlist.

Écosystème Babel: Un aperçu rapide

Comme vous l’avez remarqué dans la section précédente, Babel ne fera rien tout seul lorsque vous l’installerez. Nous devons installer un ensemble de plugins pour obtenir le comportement souhaité, ou nous pouvons utiliser des préréglages, qui sont des ensembles prédéfinis de plugins.

Habituellement, chaque fonctionnalité que vous souhaitez inclure sera sous la forme d’un plugin. Quelques exemples pour ES2015 incluent:

• constantes
• fonctions de flèche
• fonctions à portée de bloc
• classes
• for-of
• spread
• modèles littéraux

Voir le Page Plugins dans la documentation Babel pour une liste complète.

Mais parfois, vous ne voulez pas inclure tous les plugins un par un. Il existe donc des préréglages prédéfinis qui faciliteront le processus d’installation de chaque plugin.

Les trois préréglages officiels actuellement disponibles sont:

• Env
• React
• Flow

Env est le plus fréquemment utilisé et celui que nous avons utilisé ici. Il charge automatiquement toutes les transformations nécessaires pour rendre votre code compatible en fonction des navigateurs ciblés.

Le préréglage React transforme le code généralement présent dans les projets React, ajoutant principalement la compatibilité avec les annotations de flux et JSX.

Et enfin, le préréglage de flux est utilisé pour nettoyer le code des annotations de type de flux (bien qu’il ne vérifie pas si les types sont valides ou non.)

Babel Polyfill

Il y a des fonctionnalités JavaScript qui ne peuvent pas être transformées syntaxiquement, généralement parce qu’il n’y a pas de fonctionnalité équivalente implémentée — par exemple, les promesses et les fonctions de générateur.

Ce type de fonctionnalités doit être implémenté dans le navigateur par une bibliothèque pour être utilisé dans votre code, et c’est le travail d’un polyfill.

Le polyfill Babel est composé de core-js et du runtime du régénérateur. Ensemble, ils couvrent toutes les fonctionnalités d’ES2015+.

Utilisation avancée

Comme mentionné, Babel peut également être utilisé pour transformer des fonctionnalités qui n’ont pas encore été implémentées dans le langage. Un bon exemple de ceci est la proposition de champs de classe (actuellement à l’étape 3 du TC39: candidat). Ceci est particulièrement populaire parmi les développeurs React, car cela supprime la nécessité de lier explicitement des méthodes à un composant particulier, et signifie également que le state d’un composant peut être déclaré en tant que champ de classe (éliminant potentiellement le besoin d’un constructeur).

Pour ceux d’entre vous qui souhaitent utiliser des champs de classe aujourd’hui, vous devez ajouter les propriétés babel-plugin-transform-class-properties en tant que dépendance de développement:

npm install --save-dev babel-plugin-transform-class-properties

Vous devez également mettre à jour votre fichier .babelrc comme suit:

{ "presets": , "plugins": }

Maintenant, vous pouvez écrire:

class App extends Component { state = { count: 0 }; incCount = () => { this.setState(ps => ({ count: ps.count + 1 })); }; render() { return ( <div> <p>{ this.state.count }</p> <button onClick={this.incCount}>add one</button> </div> ); }}

Et ça ne s’arrête pas là. Vous pouvez également utiliser Babel pour ajouter vos propres fonctionnalités au langage, comme le montre notre tutoriel Comprendre les AST en créant votre Propre plugin Babel.

Alternatives

L’écriture d’applications web modernes nécessite parfois plus que les fonctionnalités disponibles en JavaScript. D’autres langues peuvent également être traduites en JavaScript compatible mais implémentent également d’autres fonctionnalités utiles.

L’option la plus populaire est TypeScript, qui est un JavaScript régulier qui implémente des fonctionnalités ES modernes mais en ajoute également d’autres, en particulier en ce qui concerne la sécurité des types.

À l’autre extrême, il existe des langages entièrement différents dans différentes catégories, des langages fonctionnels comme PureScript aux langages orientés objet comme Dart.

Pour un aperçu plus approfondi des langages alternatifs, jetez un œil aux 10 langages qui compilent en JavaScript.

Conclusion

Babel est une excellente option pour écrire des applications modernes tout en continuant à utiliser du JavaScript qui peut être compris par tous les développeurs et le large éventail de navigateurs dans lesquels le code doit s’exécuter.

Babel n’est pas seulement utile pour transformer ES2015+ en versions précédentes du langage — à la fois dans le navigateur et sur des plates-formes telles que Node.js – mais aussi pour ajouter de nouvelles fonctionnalités qui ne font pas partie du standard. Pour voir ce que je veux dire, il suffit de jeter un œil au répertoire npm pour trouver tous les plugins ou préréglages Babel disponibles.

Comme JavaScript évolue à un rythme aussi rapide, il est évident que les fabricants de navigateurs auront besoin d’un certain temps pour implémenter les dernières fonctionnalités. Donner une place à Babel dans votre boîte à outils signifie que vous pouvez écrire du JavaScript de pointe aujourd’hui, en sachant que vous n’abandonnez aucun de vos utilisateurs. Qu’est-ce qu’il ne faut pas aimer?