Je viens de commencer à utiliser Babel pour compiler mon code javascript ES6 dans ES5. Lorsque je commence à utiliser Promises, il semble que cela ne fonctionne pas. Le site Web de Babel déclare soutenir les promesses via les polyfills.
Sans aucune chance, j'ai essayé d'ajouter:
require("babel/polyfill");
ou
import * as p from "babel/polyfill";
Avec cela, j'obtiendrai 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 quelque chose de fondamental ici. J'ai également essayé d'ajouter l'ancien et bon NPM bluebird, mais il semble que cela ne fonctionne pas.
Comment utiliser les polyfills de Babel?
npm install _name_
npm install --save babel-polyfill
etrequire('babel-polyfill)
.Réponses:
Cela a un peu changé dans babel v6.
À partir de la documentation:
Installation:
$ npm install babel-polyfill
Utilisation dans Node / Browserify / Webpack:
Pour inclure le polyfill, vous devez l'exiger en haut du point d'entrée de votre application.
require("babel-polyfill");
Utilisation dans le navigateur:
disponible à partir du
dist/polyfill.js
fichier dans unebabel-polyfill
version npm. Cela doit être inclus avant tout votre code Babel compilé. Vous pouvez soit l'ajouter à votre code compilé, soit l'inclure dans un<script>
avant.REMARQUE: ne faites pas
require
cela via browserify etc, utilisezbabel-polyfill
.la source
Array.protorype.findIndex()
ne fonctionnent pas sans le polyfill et babel ne lèvera pas d'exception lors de la transpilation? Est-ce la nature d'un Polyfill ™?La documentation Babel décrit cela de manière assez concise:
Assurez-vous que vous en avez besoin au point d'entrée de votre application, avant tout autre appel. Si vous utilisez un outil comme webpack, cela devient assez simple (vous pouvez dire à webpack de l'inclure dans le bundle).
Si vous utilisez un outil comme
gulp-babel
oubabel-loader
, vous devez également installer lebabel
package lui-même pour utiliser le polyfill.Notez également que pour les modules qui affectent la portée globale (polyfills et autres), vous pouvez utiliser une importation laconique pour éviter d'avoir des variables inutilisées dans votre module:
la source
import 'babel-core/polyfill'
sans installerbabel
et cela a très bien fonctionné.import 'babel-core/polifyll'
marche. Je l'ai essayé sans l'installationbabel
et cela n'a pas fonctionné pour moi. Au fait: ssube conseille fonctionne.Pour Babel version 7, si vous utilisez @ babel / preset-env, pour inclure polyfill, tout ce que vous avez à faire est d'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 cet indicateur spécifié, babel @ 7 optimisera et n'inclura que les polyfills dont vous avez besoin.
Pour utiliser cet indicateur, après l'installation:
Ajoutez simplement le drapeau:
dans votre fichier de configuration babel appelé "babel.config.js" (également nouveau dans Babel @ 7), dans la section "@ babel / env":
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 installerez core-js:
Une nouvelle entrée
corejs
est ajoutée à votre babel.config.jsvoir exemple: https://github.com/ApolloTang/stackoverflow-eg--babel-v7.4.0-polyfill-w-core-v3
Référence:
la source
useBuiltIns: "usage"
ne fonctionne pas de mon côté. Il n'inclut tout simplement aucun polyfils dans le bundle (exemple: j'utilise des générateurs et j'obtiens une erreur "regeneratorRuntime is not defined"). Des idées?Si votre package.json ressemble à ceci:
Et vous obtenez le
Cannot find module 'babel/polyfill'
message d'erreur, il vous suffit probablement de modifier votre instruction d'importation FROM:À:
Et assurez-vous qu'il vient avant toute autre
import
déclaration (pas nécessairement au point d'entrée de votre application).Référence: https://babeljs.io/docs/usage/polyfill/
la source
Tout d'abord, la réponse évidente que personne n'a fournie, vous devez installer Babel dans votre application:
(ou
babel-core
si vous le souhaitezrequire('babel-core/polyfill')
).En dehors de cela, j'ai une tâche difficile de transpiler 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'utiliserbabel/polyfill
directement en premier lieu), alors j'aimerais mettre davantage l'accent sur cette partie de la réponse de @ ssube:J'ai rencontré un problème étrange où j'essayais d'exiger
babel/polyfill
d'un fichier de démarrage d'environnement partagé et j'ai eu l'erreur référencée par l'utilisateur - je pense que cela pourrait avoir quelque chose à voir avec la façon dont babel commande les importations par rapport aux demandes, mais je suis incapable de reproduire maintenant. Quoi qu'il en soit, le déplacement enimport 'babel/polyfill'
tant que première ligne dans mes scripts de démarrage client et serveur a résolu le problème.Notez que si vous souhaitez utiliser à la place,
require('babel/polyfill')
je m'assurerai 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 vous avez des instructions d'importation dans votre script de démarrage, créezimport babel/polyfill
la première ligne de votre script plutôt querequire('babel/polyfill')
.la source
sudo
avec npm docs.npmjs.com/getting-started/fixing-npm-permissionshttps://www.quora.com/What-does-babel-polyfill-do
https://hackernoon.com/polyfills-everything-you-ever-wanted-to-know-or-maybe-a-bit-less-7c8de164e423
la source
Comme Babel le dit dans la documentation , pour Babel> 7.4.0 le module @ babel / polyfill est obsolète , il est donc recommandé d'utiliser directement les bibliothèques core-js et regenerator-runtime qui auparavant étaient incluses dans @ babel / polyfill.
Donc, cela a fonctionné pour moi:
puis ajoutez tout en haut de votre fichier js initial:
la source