Créer des sites Web qui fonctionnent bien sur tous les principaux navigateurs est l'un des principes fondamentaux d'un de l'écosystème Web ouvert. Cependant, cela implique un travail supplémentaire pour s'assurer que tous le code que vous écrivez est pris en charge dans chaque navigateur que vous prévoyez de cibler. Si vous vous souhaitez utiliser les nouvelles fonctionnalités du langage JavaScript, vous devez convertir vers des formats rétrocompatibles pour les navigateurs qui ne prennent pas encore en charge de l'IA générative.
Babel est l'outil le plus utilisé pour compiler du code
qui contient une syntaxe plus récente dans du code que différents navigateurs et environnements
(comme Node.js) peuvent comprendre. Dans ce guide, nous partons du principe que vous utilisez Babel.
vous devez suivre les instructions de configuration pour
incluez-le dans votre
application si vous ne l'avez pas déjà fait. Sélectionner webpack
dans Build Systems si vous utilisez webpack comme bundler de modules dans votre application.
Pour utiliser Babel afin de ne transposer que ce dont vos utilisateurs ont besoin, vous 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 le code transcompilé aux navigateurs qui n'en ont pas besoin.
Identifier les navigateurs que vous souhaitez cibler
Avant de modifier la façon dont le code de votre application est transpilé, ont besoin d'identifier les navigateurs qui accèdent à votre application. Analyser les navigateurs qu'ils utilisent actuellement, ainsi que ceux que vous prévoyez de cibler pour une décision éclairée.
Utiliser @babel/preset-env
Le transpilage du code génère généralement un fichier dont la taille est supérieure à leurs formes d'origine. En limitant la quantité de compilation que vous effectuez peut réduire la taille de vos groupes pour améliorer les performances d'une page Web.
Au lieu d'inclure des plug-ins spécifiques pour compiler de manière sélective certains langages fonctionnalités que vous utilisez, Babel fournit un certain nombre de préréglages qui regroupent les plug-ins ensemble. Utilisez @babel/preset-env. pour n'inclure que les transformations et les polyfills nécessaires aux navigateurs que vous prévoyez le ciblage.
Inclure @babel/preset-env dans le tableau presets de votre Babel
de configuration, .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 à browserlist, une configuration Open Source partagée entre différents
pour cibler des navigateurs. Vous trouverez la liste complète des requêtes compatibles dans la
documentation sur navigateurslist.
Vous pouvez également utiliser un fichier .browserslistrc pour répertorier les environnements
que vous souhaitez cibler.
La valeur ">0.25%" indique à Babel d'inclure uniquement les transformations
pour prendre en charge les navigateurs qui représentent plus de 0,25 %
sur l'utilisation de l'IA générative. Cela permet de s'assurer que votre bundle ne contient pas de transpilation inutiles
pour les navigateurs utilisés par un très faible pourcentage d'utilisateurs.
Dans la plupart des cas, il s'agit d'une meilleure approche que l'approche suivante : configuration:
"targets": "last 2 versions"
La valeur "last 2 versions" transpile votre code pour
les deux dernières versions de chaque navigateur,
ce qui signifie qu'ils sont pris en charge
pour les navigateurs qui ne sont plus disponibles, comme Internet Explorer.
Cela peut augmenter inutilement la taille de votre bundle si vous ne vous attendez pas
pour accéder à votre application.
En fin de compte, vous devez sélectionner la combinaison de requêtes appropriée pour et ciblez 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 active/désactive
en fonction des navigateurs cibles spécifiés. Bien que cela fonctionne bien, une collection entière de
les fonctions de syntaxe sont transformées lorsqu'un navigateur ciblé contient un bug avec une seule fonctionnalité.
Le code est alors souvent plus transformé que nécessaire.
Développée à l'origine en tant que préréglage distinct, la
option de correction de bugs dans @babel/preset-env
résout ce problème en convertissant la syntaxe moderne qui est défectueuse dans certains navigateurs dans la syntaxe la plus proche
équivalente, qui n'est pas rompue dans ces navigateurs. Résultat : un code moderne presque identique
à l'aide de quelques modifications de syntaxe mineures
garantissant la compatibilité avec tous les navigateurs cibles. Pour utiliser cette
assurez-vous d'avoir installé @babel/preset-env 7.10 ou version ultérieure, puis définissez le paramètre
Propriété bugfixes sur true:
{
"presets": [
[
"@babel/preset-env",
{
"bugfixes": true
}
]
]
}
Dans Babel 8, l'option bugfixes sera activée par défaut.
Utiliser <script type="module">
Les modules JavaScript, ou modules ES, sont une fonctionnalité relativement récente prise en charge dans
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
utilisez-les aussi avec @babel/preset-env pour ne cibler que les navigateurs compatibles
de l'IA générative.
Au lieu de demander des versions de navigateurs ou des parts de marché spécifiques,
en spécifiant "esmodules" : true dans le champ targets de votre fichier .babelrc.
{
"presets":[
[
"@babel/preset-env",
{
"targets":{
"esmodules": true
}
}
]
]
}
De nombreuses nouvelles fonctionnalités ECMAScript compilées avec Babel sont déjà compatibles dans les environnements compatibles avec les modules JavaScript. En faisant cela, vous simplifier le processus visant à s'assurer que seul le code transcompilé est utilisé pour les navigateurs qui en ont réellement besoin.
Les navigateurs compatibles avec les modules ignorent les scripts dotés d'un attribut nomodule.
À l'inverse, les navigateurs qui ne prennent pas en charge les modules ignorent les éléments de script utilisant
type="module" Cela signifie que vous pouvez inclure un module ainsi qu'une création de remplacement compilée.
Idéalement, les scripts en deux versions d'une application sont inclus comme suit:
<script type="module" src="main.mjs"></script>
<script nomodule src="compiled.js" defer></script>
Les navigateurs compatibles avec 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 l'inverse.
Si vous utilisez webpack, vous pouvez définir des cibles différentes dans vos configurations pour deux versions distinctes de votre application:
- Version uniquement pour les navigateurs compatibles avec les modules.
- Version comprenant un script compilé qui fonctionne dans n'importe quel ancien navigateur. La taille du fichier est plus importante, car la transpilation doit prendre en charge un plus large éventail de navigateurs.
Merci à Connor Clark et Jason Miller pour leurs commentaires.