L'un des principes fondamentaux d'un écosystème Web ouvert consiste à créer des sites Web adaptés aux principaux navigateurs. Toutefois, cela implique un travail supplémentaire pour vous assurer que l'ensemble du code que vous écrivez est compatible avec chaque navigateur que vous prévoyez de cibler. Si vous souhaitez utiliser de nouvelles fonctionnalités en langage JavaScript, vous devez convertir ces dernières en formats rétrocompatibles pour les navigateurs qui ne les acceptent pas encore.
Babel est l'outil le plus utilisé pour compiler du code contenant une syntaxe plus récente et compréhensible par différents navigateurs et environnements (tels que Node). Ce guide suppose que vous utilisez Babel. Vous devez donc suivre les instructions de configuration pour l'inclure dans votre application si vous ne l'avez pas déjà fait. Sélectionnez webpack dans Build Systems si vous utilisez webpack en tant que bundler de module dans votre application.
Pour utiliser Babel afin de ne transpiler que ce qui est nécessaire pour vos utilisateurs, vous devez:
- Identifiez les navigateurs que vous souhaitez cibler.
- Utilisez
@babel/preset-envavec les cibles de navigateur appropriées. - Utilisez
<script type="module">pour arrêter d'envoyer du code transcompilé aux navigateurs qui n'en ont pas besoin.
Identifiez les navigateurs que vous souhaitez cibler.
Avant de commencer à modifier la transpilation du code de votre application, vous devez identifier les navigateurs qui accèdent à votre application. Pour prendre des décisions éclairées, analysez les navigateurs que vos utilisateurs utilisent actuellement et ceux que vous prévoyez de cibler.
Utiliser @babel/preset-env
La transpilation de code entraîne généralement un fichier dont la taille est supérieure à celle de leurs formes d'origine. En limitant la quantité de compilation que vous effectuez, vous pouvez réduire la taille de vos bundles afin d'améliorer les performances d'une page Web.
Au lieu d'inclure des plug-ins spécifiques pour compiler de manière sélective certaines fonctionnalités du langage que vous utilisez, Babel fournit un certain nombre de préréglages regroupant les plug-ins. Utilisez @babel/preset-env pour n'inclure que les transformations et les polyfills nécessaires aux navigateurs que vous prévoyez de cibler.
Incluez @babel/preset-env dans le tableau presets de votre fichier de configuration Babel, .babelrc:
{
"presets": [
[
"@babel/preset-env",
{
"targets": ">0.25%"
}
]
]
}
Utilisez le champ targets pour spécifier les versions de navigateur que vous souhaitez inclure en ajoutant une requête appropriée au champ browsers. @babel/preset-env s'intègre à la liste des navigateurs, une configuration Open Source partagée entre différents outils pour le ciblage des navigateurs. Vous trouverez la liste complète des requêtes compatibles dans la documentation sur la liste de navigateurs.
Une autre option consiste à utiliser un fichier .browserslistrc pour répertorier les environnements que vous souhaitez cibler.
La valeur ">0.25%" indique à Babel d'inclure uniquement les transformations nécessaires pour prendre en charge les navigateurs qui représentent plus de 0,25% de l'utilisation mondiale. Cela garantit que votre bundle ne contient pas de code transpilé inutile pour les navigateurs utilisés par un très faible pourcentage d'utilisateurs.
Dans la plupart des cas, cette approche est préférable à l'utilisation de la configuration suivante:
"targets": "last 2 versions"
La valeur "last 2 versions" transpile votre code pour les deux dernières versions de chaque navigateur, ce qui signifie que les navigateurs abandonnés tels qu'Internet Explorer sont compatibles.
Cela peut augmenter inutilement la taille de votre bundle si vous ne prévoyez pas d'utiliser ces navigateurs pour accéder à votre application.
En fin de compte, vous devez sélectionner la combinaison de requêtes appropriée pour ne cibler que les navigateurs qui répondent à vos besoins.
Activer les corrections de bugs modernes
@babel/preset-env regroupe plusieurs fonctionnalités de syntaxe JavaScript dans des collections et les active/désactive en fonction des navigateurs cibles spécifiés. Bien que cela fonctionne bien, tout un ensemble de fonctionnalités de syntaxe est transformé lorsqu'un navigateur ciblé contient un bug avec une seule fonctionnalité.
Cela se traduit souvent par une transformation du code plus importante que nécessaire.
Initialement développée en tant que préréglage distinct, l'option de correction des bugs de @babel/preset-env résout ce problème en convertissant la syntaxe moderne qui présente des erreurs dans certains navigateurs vers la syntaxe équivalente la plus proche qui n'est pas défaillante dans ces navigateurs. Résultat : un code moderne presque identique avec de légères modifications de syntaxe garantit la compatibilité avec tous les navigateurs cibles. Pour utiliser cette optimisation, assurez-vous d'avoir installé @babel/preset-env 7.10 ou une version ultérieure, puis définissez la propriété bugfixes sur true:
{
"presets": [
[
"@babel/preset-env",
{
"bugfixes": true
}
]
]
}
Dans Babel 8, l'option bugfixes est activée par défaut.
Utiliser "<script type="module">"
Les modules JavaScript, ou modules ES, sont une fonctionnalité relativement récente compatible avec tous les principaux navigateurs. Vous pouvez utiliser des modules pour créer des scripts pouvant être importés et exportés à partir d'autres modules, mais vous pouvez également les utiliser avec @babel/preset-env pour ne cibler que les navigateurs compatibles.
Au lieu d'interroger des versions de navigateur ou des parts de marché spécifiques, envisagez de spécifier "esmodules" : true dans le champ targets de votre fichier .babelrc.
{
"presets":[
[
"@babel/preset-env",
{
"targets":{
"esmodules": true
}
}
]
]
}
De nombreuses fonctionnalités ECMAScript plus récentes compilées avec Babel sont déjà compatibles avec les environnements compatibles avec les modules JavaScript. Ainsi, vous simplifiez le processus qui consiste à vous assurer que seul le code transpilé est utilisé pour les navigateurs qui en ont réellement besoin.
Les navigateurs compatibles avec les modules ignorent les scripts avec un attribut nomodule.
À l'inverse, les navigateurs qui ne sont pas compatibles avec les modules ignorent les éléments de script avec type="module". Cela signifie que vous pouvez inclure un module ainsi qu'une compilation de remplacement.
Idéalement, les deux scripts de version d'une application sont inclus comme ceci:
<script type="module" src="main.mjs"></script>
<script nomodule src="compiled.js" defer></script>
Les navigateurs qui prennent en charge les modules récupèrent et exécutent main.mjs et ignorent compiled.js.
Les navigateurs qui ne prennent pas en charge les modules font le contraire.
Si vous utilisez Webpack, vous pouvez définir des cibles différentes dans vos configurations pour deux versions distinctes de votre application:
- Version réservée aux navigateurs compatibles avec les modules.
- Version incluant un script compilé qui fonctionne dans n'importe quel ancien navigateur. Ce fichier est plus volumineux, car la transpilation doit prendre en charge un plus grand nombre de navigateurs.
Nous remercions Connor Clark et Jason Miller pour leurs avis.