Babel et polyfills pour du JavaScript lisible par tous

Eric Burel
Sep 24, 2019 · 4 min read

Les outils — Épisode 1

“Transpiler” ?

En JavaScript, mes chers, on ne compile pas, on transpile. Transpiler signifie transformer du code dans un langage, en un code… dans un même langage.

On fait donc la différence entre 3 types d’outils :

  • le compilateur : transforme du code un langage exécutable, par exemple du C en assembleur ou du Java en bytecode. Le JavaScript est un langage interprété, donc pas besoin de compilateur.
  • le transpileur : transforme du code en code, dans un même langage, par exemple JavaScript ES6 en JavaScript ES5, ou du JavaScript non optimisé en JavaScript optimisé.
  • le pré-processeur : transforme du code dans un méta-language, qui n’est par définition pas exécutable en pratique, en code dans un langage cible (par exemple SASS ou LESS vers CSS).

La transpilation va surtout nous permettre de transformer automatiquement du JavaScript dernière génération (ES6, ES7, ES8…) en JavaScript lisible par les navigateurs les plus anciens.

Grace au transpileur, pas besoin de choisir : vous pouvez utiliser les fonctionnalités les plus modernes ET produire des applications universellement accessibles.

Babel

Babel est un transpileur pour JavaScript, en fait le seul vraiment utilisé en pratique. Il s’agit tout simplement d’un outil en ligne de commande, qui prend en entrée un fichier et le transpile selon des règles que vous pouvez configurer.

Installons Babel en ligne de commande, ainsi qu’un premier preset :

npm i --save-dev @babel/core @babel/cli
npm i --save-dev @babel/preset-env

Note: à l’écriture de cet article, Babel en est à sa version 7.6. L’organisation des packages a légèrement changée depuis les versions précédentes. Si vous lisez d’autres articles sur Babel, attention donc à la version utilisée par l’auteur.

Par défaut, Babel ne fait… absolument rien et vous renvoie juste le contenu de votre fichier. Pas très utile. Il faut donc créer un fichier .babelrc, à la racine du projet, qui contient toutes les options de Babel. On peut aussi les inclure dans le champ babel du fichier package.json.

Pour utiliser notre preset “env”, il faut ajouter cette configuration au fichier .babelrc :

{
presets:["@babel/preset-env"]
}

Un preset est un ensemble de règles qui seront appliquées lors de la transpilation. Le preset “env” est le preset officiel permettant de transpiler du code moderne en code lisible par tous les navigateurs.

On peut enfin lancer les commandes suivantes pour tester la sortie de Babel:

echo "const x = 42" > test.js
./node_modules/.bin/babel test.js

Après transpilation, on obtient dans la console:

"use strict";

var x = 42;

const est une syntaxe ES6 qui n’est pas encore supportée par tous les navigateurs, Babel va donc le transformer en var.

Vous pouvez aussi utiliser @babel/node pour pouvoir transpiler le code à la volée tout en l'exécutant. On l’utilise parfois en mode développement.

On note au passage que lorsque l’on installe un outil en ligne de commande comme Babel avec npm , l’exécutable est stocké dans le dossier ./node_modules/.bin . Il est aussi appelable directement dans les scripts du fichier package.json.

La communauté propose tout un ensemble de packages, pour pouvoir profiter des standards à venir (ES7, ES8) voire de syntaxes plus originales. Mais attention, si vous abusez des syntaxes exotiques, vous risquez d’être le seul à comprendre votre code…

Des polyfills avec Babel

Outre la syntaxe du JavaScript, ES6 apporte aussi de nouvelles fonctionnalités, telles que les promises, qui elles aussi peuvent être mal tolérées par les anciens navigateurs.

Un polyfill est une implémentation JavaScript d’une fonctionnalité absente du navigateur, et qui là encore permet d’être certain que votre code est exécutable par tous.

@babel/polyfill est un package indispensable et facile à installer, qui contient les polyfills pour l'ES6.

De manière générale, si vous souhaitez utiliser des fonctionnalités très récentes ou encore expérimentales, n’hésitez pas à chercher un polyfill qui propose une implémentation valable même là où ces fonctionnalités n’existent pas encore.

PostCSS, du CSS pour tous les navigateurs

L’ensemble des fonctionnalités de PostCSS dépasse le cadre de cet article, mais retenez que cet outil vous permet, grace à son pluggin cssnext, de générer du CSS universel.

Le problème est exactement le même qu’en JavaScript, tous les navigateurs ne gèrent pas le CSS de la même façon ou ne supportent pas les dernières fonctionnalités.

PostCSS, avec cssnext, va préfixer automatiquement vos champs (moz, webkit) et vous autoriser à utiliser les dernières fonctionnalités du langage CSS (fonctions modernes, variables, etc.).

En résumé, PostCSS avec cssnext est un peu le Babel du CSS, et donc un outil indispensable.

Pour utiliser Babel, @babel/polyfill et PostCSS efficacement dans votre application, il faut automatiser vos process de transpilation, par exemple avec Webpack. A suivre dans un prochain article !

pointJS

Du JS, en français, un point c’est tout.

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store