web-dev-qa-db-fra.com

Confus à propos de l'option useBuiltIns de @ babel / preset-env (à l'aide de l'intégration de la liste des navigateurs)

Je travaille sur un projet Web utilisant Babel 7 avec Webpack 4. Je n'ai jamais utilisé Babel auparavant et je ne comprends pas vraiment certaines parties. Basé sur le documentation J'utilise @babel/preset-env Car cela semble être la méthode recommandée (surtout pour les débutants). Également en utilisant l'intégration Browserslist via mon fichier .browserslistrc.

Webpack fait bien la compilation (babel-loader Version 8.0.2), Je n’ai aucune erreur mais je suis confus à propos de cette useBuiltIns: "entry"option mentionnée ici et comment polyfill le système fonctionne à Babel.

. babelrc.js 

module.exports = {
  presets: [
    ['@babel/preset-env', {
      "useBuiltIns": "entry" // do I need this?
    }]
  ],
  plugins: [
    '@babel/plugin-syntax-dynamic-import'
  ]
};

. browserslistrc
Copié à partir de ici (jugé raisonnable car mon projet utilise Bootstrap).

>= 1%
last 1 major version
not dead
Chrome >= 45
Firefox >= 38
Edge >= 12
Explorer >= 10
iOS >= 9
Safari >= 9
Android >= 4.4
Opera >= 30

Mes questions sont donc les suivantes:

1) Dois-je utiliser cette option useBuiltIns: "entry"?

2) Dois-je installer le paquet @babel/polyfill Et démarrer mon vendors.js Avec require("@babel/polyfill");?

3) Et si j'omettais les deux?

Si je fais 1 et 2, mon vendors.js Passe à 411 KB
Si j'omets les deux, c'est juste 341 KB
après une construction de production.

Je pensais que @babel/preset-env Gérait par défaut toutes les réécritures et polyfill sans qu'aucun extra import/require Ne soit nécessaire de mon côté ...

Merci!

- EDIT -

L'équipe de Babel vient de mettre à jour le docs de @babel/polyfill en se basant sur des problèmes GitHub (dont le mien) se plaignant de documents peu clairs/trompeurs. Maintenant, il est évident de savoir comment l'utiliser. (... et après cela ma question initiale semble stupide:)

javascriptwebpackbabelbabel-preset-env
21
ARS81

1) Dois-je utiliser cette option useBuiltIns: "entry"?

Oui, selon les documents de Babel:

"Cette option active un nouveau plug-in qui remplace la déclaration d'importation" @ babel/polyfill "ou require (" @ babel/polyfill ") avec des besoins individuels pour @ babel/polyfill en fonction de l'environnement". avoir @babel/polyfill installé en cas de besoin).

2) Dois-je installer le paquet @ babel/polyfill et démarrer le fichier vendors.js avec require ("@ babel/polyfill"); ?

Vous devez installer @babel/polyfill, ça ne vient pas par défaut sur babel. Vous devez l'inclure dans votre point d'entrée ou ajouter une importation en haut de votre point d'entrée.

3) Et si j'omettais les deux?

Vous n'aurez pas de polyfill.

12
PlayMa256

1) Dois-je utiliser cette option useBuiltIns: "entry"?

Oui, si vous souhaitez inclure des polyfill en fonction de votre environnement cible.

TL; DR

Il y a essentiellement 3 options pour useBuiltIns:

"entry" : lorsque cette option est utilisée, @babel/preset-env remplace les importations directes de core-js pour importer uniquement les modules spécifiques requis pour un environnement cible.

Cela signifie que vous devez ajouter

import "core-js/stable";
import "regenerator-runtime/runtime";

à votre point d’entrée et ces lignes ne seront remplacées que par les remplissages obligatoires. Lors du ciblage chrome 72, il sera transformé par @babel/preset-env à

import "core-js/modules/es.array.unscopables.flat";
import "core-js/modules/es.array.unscopables.flat-map";
import "core-js/modules/es.object.from-entries";
import "core-js/modules/web.immediate";

"usage" : dans ce cas, les polyfills seront ajoutés automatiquement lorsque l'utilisation de certaines fonctionnalités n'est pas prise en charge dans l'environnement cible. Alors:

const set = new Set([1, 2, 3]);
[1, 2, 3].includes(2);

dans les navigateurs comme ie11 sera remplacé par

import "core-js/modules/es.array.includes";
import "core-js/modules/es.array.iterator";
import "core-js/modules/es.object.to-string";
import "core-js/modules/es.set";

const set = new Set([1, 2, 3]);
[1, 2, 3].includes(2);

Si le navigateur cible utilise le dernier chrome, aucune transformation ne sera appliquée.

C'est l'arme que j'ai choisie car il n'est pas nécessaire d'inclure quoi que ce soit (core-js ou régénérateur) dans le code source, car seuls les remplissages obligatoires requis seront ajoutés automatiquement en fonction de l'environnement cible défini dans la liste de navigation.

false : il s'agit de la valeur par défaut lorsqu'aucun remplissage multiple n'est ajouté automatiquement.

2) Dois-je installer le paquet @ babel/polyfill et démarrer le fichier vendors.js avec require ("@ babel/polyfill"); ?

Oui pour l'environnement antérieur à babel v7.4 et core-js v3.

TL; DR

Non. À partir de babel v7.4 et core-js v3 (utilisé pour le polyfilling sous le capot) @babel/preset-env ajoutera les polyfills que s’il sait lequel d’entre eux est requis et dans l’ordre recommandé.

De plus @babel/polyfill est considéré comme déconseillé au profit de core-js et regenerator-runtime inclusions.

Donc, utiliser useBuiltIns avec des options autres que false devrait résoudre le problème.

N'oubliez pas d'ajouter core-js comme dépendance de votre projet et définissez sa version dans @babel/preset-env sous corejs propriété.

3) Et si j'omettais les deux?

Comme @ PlayMa256 a déjà répondu, il n'y aura pas de remplissage.

Des informations plus détaillées et complètes peuvent être trouvées à l'adresse core-jspage du créateur

Aussi, n'hésitez pas à jouer avec babel sandbox

19
Egor Litvinchuk