web-dev-qa-db-fra.com

Comment installer la bibliothèque babel-polyfill?

Je viens juste de commencer à utiliser Babel pour compiler mon code javascript ES6 dans ES5. Quand je commence à utiliser Promises, il semble que cela ne fonctionne pas. Le site Web de Babel indique le support des promesses via des polyfill.

Sans aucune chance, j'ai essayé d'ajouter:

require("babel/polyfill");

ou

import * as p from "babel/polyfill";

Avec cela, je vais avoir l'erreur suivante sur le démarrage de mon application:

Impossible de trouver le module 'babel/polyfill'

J'ai cherché le module mais il me semble qu'il me manque un élément fondamental ici. J'ai également essayé d'ajouter l'ancien et le bon NPM bluebird, mais il semble que cela ne fonctionne pas.

Comment utiliser les polyfill de Babel?

javascriptnode.jsbabeljspolyfillsbabel-polyfill
131
Shlomi Sasson

Cela a un peu changé dans babel v6.

De la docs:

Le polyfill émulera un environnement ES6 complet. Ce polyfill est automatiquement chargé lors de l'utilisation de babel-node.

Installation:
$ npm install babel-polyfill

tilisation dans Node/Browserify/Webpack:
Pour inclure le remplissage multiple, vous devez le demander en haut du point d’entrée de votre application.
require("babel-polyfill");

tilisation dans le navigateur:
Disponible à partir du fichier dist/polyfill.js dans une version de babel-polyfill npm. Cela doit être inclus avant tout votre code Babel compilé. Vous pouvez l'ajouter au code compilé ou l'inclure dans un <script> avant celui-ci.

REMARQUE: Ne pas require ceci via browserify, etc., utilisez babel-polyfill.

65
vdclouis

Les documentation Babel décrivent cette jolie manière:

Babel comprend un polyfill qui inclut un runtime de régénérateur personnalisé et core.js.

Cela imitera un environnement ES6 complet. Ce polyfill est automatiquement chargé lors de l'utilisation de babel-node et de babel/register.

Assurez-vous que vous en avez besoin au point d'entrée de votre application, avant toute autre utilisation. Si vous utilisez un outil tel que webpack, cela devient assez simple (vous pouvez dire à webpack de l'inclure dans le paquet).

Si vous utilisez un outil tel que gulp-babel ou babel-loader, vous devez également installer le package babel pour pouvoir utiliser le polyfill.

Notez également que pour les modules qui affectent la portée globale (polyfill et similaires), vous pouvez utiliser une importation abrégée pour éviter d'avoir des variables inutilisées dans votre module:

import 'babel/polyfill';
48
ssube

Si votre package.json ressemble à ceci:

  ...
  "devDependencies": {
    "babel": "^6.5.2",
    "babel-eslint": "^6.0.4",
    "babel-polyfill": "^6.8.0",
    "babel-preset-es2015": "^6.6.0",
    "babelify": "^7.3.0",
  ...

Et vous obtenez le message d'erreur Cannot find module 'babel/polyfill', alors il vous suffira probablement de changer votre déclaration d'importation FROM:

import "babel/polyfill";

À:

import "babel-polyfill";

Et assurez-vous qu’elle figure avant toute autre instruction import (pas nécessairement au point d’entrée de votre application).

Référence: https://babeljs.io/docs/usage/polyfill/

19
l3x

Pour Babel version 7, si vous utilisez @ babel/preset-env, pour inclure polyfill, vous devez simplement ajouter un indicateur "useBuiltIns" avec la valeur "usage" dans votre configuration babel. Il n'est pas nécessaire d'exiger ou d'importer Polyfill au point d'entrée de votre application.

Avec ce drapeau spécifié, babel @ 7 optimisera et inclura uniquement les polyfills dont vous avez besoin.

Pour utiliser cet indicateur, après l'installation:

npm install --save-dev  @babel/core @babel/cli @babel/preset-env
npm install --save @babel/polyfill

Ajoutez simplement le drapeau:

useBuiltIns: "usage"

dans votre fichier de configuration babel appelé "babel.config.js" (également nouveau dans Babel @ 7), dans la section "@ babel/env":

// file: babel.config.js

module.exports = () => {
   const presets = [
      [
         "@babel/env", 
         { 
             targets: { /* your targeted browser */ },
             useBuiltIns: "usage"  // <-----------------*** add this
         }
      ]
   ];

   return { presets };
};

Référence:

Mise à jour août 2019:

Avec la sortie de Babel 7.4.0 (19 mars 2019), @ babel/polyfill est obsolète. Au lieu d'installer @ babe/polyfill, vous allez installer core-js:

npm install --save core-js@3

Une nouvelle entrée corejs est ajoutée à votre babel.config.js

// file: babel.config.js

module.exports = () => {
   const presets = [
      [
         "@babel/env", 
         { 
             targets: { /* your targeted browser */ },
             useBuiltIns: "usage",
             corejs: 3  // <----- specify version of corejs used
         }
      ]
   ];

   return { presets };
};

voir exemple: https://github.com/ApolloTang/stackoverflow-eg--babel-v7.4.0-polyfill-w-core-v

Référence:

10
apollo

Tout d'abord, la réponse évidente que personne n'a fournie, vous devez installer Babel dans votre application:

npm install babel --save

(ou babel-core si vous préférez utiliser require('babel-core/polyfill')).

De plus, j’ai une tâche difficile à faire pour copier mon es6 et jsx en tant qu’étape de construction (c’est-à-dire que je ne veux pas utiliser babel/register, c’est pourquoi j’essaie d’utiliser babel/polyfill directement dans le dossier première place), je voudrais donc insister davantage sur cette partie de la réponse de @ ssube:

Assurez-vous que vous en avez besoin au point d'entrée de votre application, avant que toute autre chose soit appelée

J'ai rencontré un problème étrange dans lequel j'essayais d'exiger babel/polyfill à partir d'un fichier de démarrage d'environnement partagé et j'ai eu l'erreur mentionnée par l'utilisateur. Je pense que cela a peut-être quelque chose à voir avec la façon dont les commandes de babel sont importées par rapport aux exigences mais je suis incapable de reproduire maintenant. Quoi qu'il en soit, déplacer import 'babel/polyfill' comme première ligne des scripts de démarrage de mon client et de mon serveur résout le problème.

Notez que si vous préférez utiliser require('babel/polyfill'), je m'assurerais que toutes vos autres instructions de chargeur de module sont également obligatoires et n'utilisent pas d'importations - évitez de mélanger les deux. En d'autres termes, si votre script de démarrage contient des instructions d'importation, faites de import babel/polyfill la première ligne de votre script plutôt que require('babel/polyfill').

9
ChetPrickles

babel-polyfill vous permet d'utiliser l'ensemble des fonctionnalités de l'ES6 au-delà des modifications de syntaxe. Cela inclut des fonctionnalités telles que les nouveaux objets intégrés tels que Promises et WeakMap, ainsi que les nouvelles méthodes statiques telles que Array.from ou Object.assign.

Sans babel-polyfill, babel vous permet uniquement d’utiliser des fonctionnalités telles que les fonctions de flèche, la déstructuration, les arguments par défaut et d’autres fonctionnalités spécifiques à la syntaxe introduites dans ES6.

https://www.quora.com/What-does-babel-polyfill-do

https://hackernoon.com/polyfills-everything-you-ever-wanted-to-know-or-maybe-a-bit-less-7c8de164e42

8
zloctb