Babel 6 régénérateur Le temps d'exécution n'est pas défini


634

J'essaie d'utiliser async, j'attends de zéro sur Babel 6, mais je reçois regeneratorRuntime n'est pas défini.

Fichier .babelrc

{
    "presets": [ "es2015", "stage-0" ]
}

fichier package.json

"devDependencies": {
    "babel-core": "^6.0.20",
    "babel-preset-es2015": "^6.0.15",
    "babel-preset-stage-0": "^6.0.15"
}

fichier .js

"use strict";
async function foo() {
  await bar();
}
function bar() { }
exports.default = foo;

L'utiliser normalement sans async / wait fonctionne très bien. Des idées sur ce que je fais mal?


Avez-vous inclus régénérateur?
ssube

3
babel-polyfill est ce dont vous avez besoin.
Ronnie Royston

babel-polyfill est amorti depuis 7.4; cette mise à jour afin de décrire la migration.
JWCS

Pour ceux qui utilisent des versions plus récentes de babel et le noeud: stackoverflow.com/a/62254909/8169904
Lun

Réponses:


682

babel-polyfill( obsolète depuis Babel 7.4) est requis. Vous devez également l'installer pour que l'async / attende de fonctionner.

npm i -D babel-core babel-polyfill babel-preset-es2015 babel-preset-stage-0 babel-loader

package.json

"devDependencies": {
  "babel-core": "^6.0.20",
  "babel-polyfill": "^6.0.16",
  "babel-preset-es2015": "^6.0.15",
  "babel-preset-stage-0": "^6.0.15"
}

.babelrc

{
  "presets": [ "es2015", "stage-0" ]
}

.js avec async / wait (exemple de code)

"use strict";

export default async function foo() {
  var s = await bar();
  console.log(s);
}

function bar() {
  return "bar";
}

Dans le fichier de démarrage

require("babel-core/register");
require("babel-polyfill");

Si vous utilisez webpack, vous devez le mettre comme première valeur de votre entrytableau dans votre fichier de configuration webpack (généralement webpack.config.js), selon le commentaire @Cemen:

module.exports = {
  entry: ['babel-polyfill', './test.js'],

  output: {
    filename: 'bundle.js'       
  },

  module: {
    loaders: [
      { test: /\.jsx?$/, loader: 'babel', }
    ]
  }
};

Si vous souhaitez exécuter des tests avec babel, utilisez:

mocha --compilers js:babel-core/register --require babel-polyfill

77
Important lorsque vous utilisez babel avec webpack: plutôt que d' utiliser ce require("babel-polyfill")qui ne fonctionne pas, vous ajoutez "babel-polyfill"dans votre entrydans config, comme ceci: entry: ["babel-polyfill", "src/main.js"]. Cela a fonctionné pour moi, y compris l'utilisation dans webpack-dev-server avec HMR.
Cemen

6
J'essayais de faire fonctionner mes tests mocha avec babel6 et async et j'ai dû ajouter --require babel-polyfill à la configuration du
lanceur de

13
Pourquoi Babel-Register?
trusktr

6
@Lloyd devDependencysi vous utilisez webpack car il "compilera" ensuite les fichiers avant de s'exécuter. dependencysi vous n'utilisez pas webpack et que vous avez besoin de babel.
BrunoLM

4
Cela rend la taille du fichier de sortie énorme ... Mieux vaut utiliser uniquement ce dont vous avez besoin au lieu d'exiger directement babel-polyfill.
Inanc Gumus

342

Outre polyfill, j'utilise babel-plugin-transform-runtime . Le plugin est décrit comme:

Externalisez les références aux helpers et builtins, en remplissant automatiquement votre code sans polluer les globaux. Qu'est-ce que cela signifie réellement? Fondamentalement, vous pouvez utiliser des éléments intégrés tels que Promise, Set, Symbol, etc. ainsi que toutes les fonctionnalités Babel qui nécessitent un polyfill de manière transparente, sans pollution globale, ce qui le rend extrêmement adapté aux bibliothèques.

Il inclut également la prise en charge d'Async / Wait ainsi que d'autres modules intégrés d'ES 6.

$ npm install --save-dev babel-plugin-transform-runtime

Dans .babelrc, ajoutez le plugin d'exécution

{
  "plugins": [
    ["transform-runtime", {
      "regenerator": true
    }]
  ]
}

Remarque Si vous utilisez babel 7, le package a été renommé en @ babel / plugin-transform-runtime .


11
Je n'avais pas besoin babel-runtimed'obtenir asynchrone pour travailler. Est-ce exact? Edit: j'exécute le côté serveur de code. :)
GijsjanB

8
Si vous avez pu l'utiliser sans babel-runtime, c'est parce qu'il est déjà dans votre arbre de dépendance. Sachez donc que si vous écrivez une bibliothèque, et que babel-runtime arrive en tant que dépendance de développement, elle pourrait ne pas être là pour vos utilisateurs. Vous devrez l'inclure comme dépendance normale pour la distribution.
Neverfox

23
seulement babel-plugin-transform-runtimerequis. Fonctionne comme un charme.
saike

9
Cette solution n'est pas correcte car elle nécessite un travail Browserify ou Webpack supplémentaire pour développer les requireappels ajoutés par le transform-runtimeplug - in.
Finesse

9
Notez que pour Babel 7, vous devez exécuternpm install --save-dev @babel/plugin-transform-runtime
Andrey Semakin

197

Utilisateurs Babel 7

J'ai eu du mal à contourner ce problème car la plupart des informations concernaient les versions antérieures de Babel. Pour Babel 7, installez ces deux dépendances:

npm install --save @babel/runtime 
npm install --save-dev @babel/plugin-transform-runtime

Et, dans .babelrc, ajoutez:

{
    "presets": ["@babel/preset-env"],
    "plugins": [
        ["@babel/transform-runtime"]
    ]
}

Comment nous pouvons le faire sans .babelrc (en utilisant simplement le fichier de configuration webpack)
Pouya Jabbarisani

2
La doc montre l'utilisation comme "plugins": ["@babel/plugin-transform-runtime"], plutôt que "plugins": [ ["@babel/transform-runtime"] ]ici. Nom de plugin différent. Les deux œuvres. Mais lequel est le bon? ..
kyw

5
J'obtiens require n'est pas défini en suivant cette méthode
Batman

1
@kyw est préférable de toujours suivre les documents - aucune différence autre que la convention.
Matt Shirley

4
L'ajout @babel/transform-runtimede plugins a provoqué une erreur «les exportations ne sont pas définies» pour moi. Je l'ai changé pour obtenir async pour travailler dans Babel7:["@babel/plugin-transform-runtime", { "regenerator": true } ]
Hari

105

Mise à jour

Cela fonctionne si vous définissez la cible sur Chrome. Mais cela pourrait ne pas fonctionner pour d'autres cibles, veuillez vous référer à: https://github.com/babel/babel-preset-env/issues/112

Cette réponse n'est donc PAS tout à fait appropriée à la question d'origine. Je vais le garder ici comme référence babel-preset-env.

Une solution simple consiste à ajouter import 'babel-polyfill'au début de votre code.

Si vous utilisez webpack, une solution rapide consiste à ajouter babel-polyfillcomme indiqué ci-dessous:

entry: {
    index: ['babel-polyfill', './index.js']
}

Je pense avoir trouvé la dernière meilleure pratique.

Consultez ce projet: https://github.com/babel/babel-preset-env

yarn add --dev babel-preset-env

Utilisez ce qui suit comme configuration babel:

{
  "presets": [
    ["env", {
      "targets": {
        "browsers": ["last 2 Chrome versions"]
      }
    }]
  ]
}

Ensuite, votre application devrait être prête à utiliser les 2 dernières versions du navigateur Chrome.

Vous pouvez également définir Node comme cibles ou affiner la liste des navigateurs selon https://github.com/ai/browserslist

Dis-moi quoi, ne me dis pas comment.

J'aime vraiment babel-preset-envla philosophie de: dites-moi quel environnement vous voulez soutenir, ne me dites PAS comment les soutenir. C'est la beauté de la programmation déclarative.

J'ai testé async awaitet ils fonctionnent. Je ne sais pas comment ils fonctionnent et je ne veux vraiment pas savoir. Je veux plutôt passer mon temps sur mon propre code et ma logique métier. Merci à babel-preset-env, cela me libère de l'enfer de la configuration Babel.


3
Cela fonctionne vraiment. Le seul inconvénient est un tas de dépendances, babel-preset-envmais je pense que ça vaut le coup. J'adore aussi le style déclaratif. Est également yarn installmaintenantyarn add
Roman Usherenko

1
@gargantuan Oui, c'est vrai.
Tyler Long

3
Pas vraiment une solution si vous souhaitez cibler des navigateurs ou des versions de nœuds plus anciens.
Rohan Orton

2
Juste au cas où ce ne serait pas évident .... cette solution recommandée ne fonctionnera PAS si vous avez besoin que votre code fonctionne dans IE11
Maurice

7
Pourquoi cela a-t-il autant de votes positifs? Cela ne fonctionne que parce qu'il ne transforme plus asynchrone / wait et n'a donc plus besoin du régénérateurRuntime et parce qu'il n'est pas transformé, il ne fonctionnera pas sur les navigateurs qui ne le prennent pas en charge.
Shikyo

47

Alternativement, si vous n'avez pas besoin de tous les modules babel-polyfillfournis, vous pouvez simplement spécifier babel-regenerator-runtimedans votre configuration webpack:

module.exports = {
  entry: ['babel-regenerator-runtime', './test.js'],

  // ...
};

Lorsque vous utilisez webpack-dev-server avec HMR, cela réduit considérablement le nombre de fichiers qu'il doit compiler sur chaque build. Ce module est installé dans le cadre de babel-polyfillsi vous avez déjà que vous êtes bien, sinon vous pouvez l'installer séparément avec npm i -D babel-regenerator-runtime.


Cela semble être la solution la plus pratique. Cependant, la plupart des navigateurs prennent en charge les générateurs, cette solution n'est donc probablement pas optimale. Voir: blogs.candoerz.com/question/213492/…
Kitanotori

Et si vous n'utilisez pas Webpack?
Batman

38

Ma solution simple:

npm install --save-dev babel-plugin-transform-runtime
npm install --save-dev babel-plugin-transform-async-to-generator

.babelrc

{
  "presets": [
    ["latest", {
      "es2015": {
        "loose": true
      }
    }],
    "react",
    "stage-0"
  ],
  "plugins": [
    "transform-runtime",
    "transform-async-to-generator"
  ]
}

1
Il vous manque "transform-async-to-generator" dans les plugins. Je devais également ajouter cela pour que cela fonctionne
GabrielBB

@GabrielBB J'ai édité le message, c'est donc un exemple complet.
webnoob

2
Est loose: truenécessaire?
Tom Söderlund

Lorsque vous l'utilisez, il ajoute require à mon fichier et require n'est pas défini dans le navigateur.
Batman

lâche: vrai n'est PAS nécessaire. Ce dont vous avez vraiment besoin dans votre .babelrc est: {"presets": ["es2015", "react", "stage-2"], "plugins": ["transform-runtime", "transform-async-to-generator "]}
Efe Ariaroo

29

Babel 7.4.0 ou version ultérieure (core-js 2/3)

Depuis Babel 7.4.0 , il @babel/polyfill est obsolète .

En général, il existe deux façons d'installer des polyfills / régénérateur: via l'espace de noms global (Option 1) ou comme ponyfill (Option 2, sans pollution globale).


Option 1: @babel/preset-env

presets: [
  ["@babel/preset-env", {
    useBuiltIns: "usage",
    corejs: 3, // or 2,
    targets: {
        firefox: "64", // or whatever target to choose .    
    },
  }]
]

utilisera automatiquement regenerator-runtimeet core-jsselon votre cible . Pas besoin d'importer quoi que ce soit manuellement. N'oubliez pas d'installer les dépendances d'exécution:

npm i --save regenerator-runtime core-js

Vous pouvez également le définir useBuiltIns: "entry"et l'importer manuellement:

import "regenerator-runtime/runtime";
import "core-js/stable"; // if polyfills are also needed

Option 2: @babel/transform-runtime avec @babel/runtime(pas de pollution de portée mondiale)

{
  "plugins": [
    [
      "@babel/plugin-transform-runtime",
      {
        "regenerator": true,
        corejs: 3 // or 2; if polyfills needed
        ...
      }
    ]
  ]
}

Installez-le:

npm i -D @babel/plugin-transform-runtime
npm i @babel/runtime

Si vous utilisez des polyfills core-js, vous installez @babel/runtime-corejs2ou à la @babel/runtime-corejs3place, voir ici .

À votre santé


2
Ceci est la réponse correcte et la plus à jour et m'a aidé à résoudre un problème sur mon projet actuel. Je vous remercie!
cdpautsch

2
{"presets": [["@ babel / preset-env", {"target": {"esmodules": true}}]]}} Cela m'a aidé pour une construction node.js
Smolin Pavel

3
Je veux dire, je le savais déjà, mais pour aider les autres, cela devrait être la bonne réponse. Meilleures salutations!
Niewiadomski Paweł

Remarque: Je pense qu'il est logique d'utiliser le thread Babel 7 , donc les erreurs liées à la version peuvent être mieux distinguées. Vous pouvez trouver une version plus spécifique de cette réponse ici (mais les déclarations ci-dessus sont toujours vraies)
ford04

16

babel-regenerator-runtimeest désormais obsolète , il faut plutôt utiliser regenerator-runtime.

Pour utiliser le générateur d'exécution avec webpacket babelv7:

installer regenerator-runtime:

npm i -D regenerator-runtime

Et puis ajoutez dans la configuration du webpack:

entry: [
  'regenerator-runtime/runtime',
  YOUR_APP_ENTRY
]

Cela devrait être la réponse acceptée, babel-polyfill ajoute beaucoup trop de choses
Shikyo

Un travail parfait pour moi ... Merci beaucoup
Leandro William

1
Cette méthode inclut toujours le runtime. Je crois que cela va à l'encontre du but de @babel/preset-env's useBuiltInsd'insérer dynamiquement le runtime en fonction de vos navigateurs cibles.
kyw

13

Mettez à jour votre .babelrcfichier selon les exemples suivants, cela fonctionnera.

Si vous utilisez un @babel/preset-envpackage

{
  "presets": [
    [
      "@babel/preset-env", {
        "targets": {
          "node": "current"
        }
      }
    ]
  ]
}
or if you are using babel-preset-env package

{
  "presets": [
    [
      "env", {
        "targets": {
          "node": "current"
        }
      }
    ]
  ]
}

2
veuillez expliquer votre réponse? ce que "nœud": "courant" fait
Vishal Solanki

j'aimerais aussi savoir ce que cela fait et si c'est une solution recommandée - c'est-à-dire qu'elle ne met rien en danger et qu'elle est "à l'épreuve du temps" (autant que tout peut l'être pour le moment). targetssemble se référer à ce : the environments you support/target for your projecttout en targets.nodeest ce : if you want to compile against the current node version, you can specify "node": true or "node": "current", which would be the same as "node": process.versions.node
user1063287

FWIW, j'ai utilisé le deuxième bloc défini dans la réponse (et supprimé "stage-0"dans le processus) et l'erreur du régénérateur a disparu.
user1063287

1
@BunkerBoy Pour plus de commodité, vous pouvez utiliser "node": "current" pour inclure uniquement les polyfills et les transformations nécessaires pour la version Node.js que vous utilisez pour exécuter Babel
Zero

donc pour cela je n'ai pas besoin d'installer des polyfills?
Vishal Solanki

12

Faites attention aux fonctions hissées

J'avais à la fois mon «importation polyfill» et ma «fonction asynchrone» dans le même fichier, mais j'utilisais la syntaxe de la fonction qui la hisse au-dessus du polyfill, ce qui me donnerait l' ReferenceError: regeneratorRuntime is not definederreur.

Changer ce code

import "babel-polyfill"
async function myFunc(){ }

pour ça

import "babel-polyfill"
var myFunc = async function(){}

pour éviter qu'il ne soit hissé au-dessus de l'importation de polyfill.


5
a; kgjablrsdkjfjasnkljfbajklfdablkhjnfl; triste, je perdais la tête et vous m'avez sauvé je vous aime
John R Perry

11

En octobre 2019, cela fonctionnait pour moi:

Ajoutez ceci au préréglage.

 "presets": [
      "@babel/preset-env"
    ]

Installez ensuite le régénérateur-runtime à l'aide de npm.

npm i regenerator-runtime

Et puis dans votre fichier principal, utilisez: (cette importation n'est utilisée qu'une seule fois)

import "regenerator-runtime/runtime";

Cela vous permettra d'utiliser async awaitsdans votre fichier et de supprimer leregenerator error


Si vous ne définissez pas de valeur pour, la valeur par useBuiltInsdéfaut sera false. Cela n'importera pas automatiquement les polyfills en fonction de l'environnement cible, ce qui sape un peu l'objectif "@babel/preset-env". Voici également un commentaire connexe de l'un des développeurs de babel.
bela53

10

Si vous utilisez, babel-preset-stage-2il suffit de démarrer le script avec --require babel-polyfill.

Dans mon cas, cette erreur a été générée par des Mochatests.

Suite à la résolution du problème

mocha \"server/tests/**/*.test.js\" --compilers js:babel-register --require babel-polyfill


9

J'ai commencé à obtenir cette erreur après avoir converti mon projet en projet dactylographié. D'après ce que je comprends, le problème provient de l'async / attente qui n'est pas reconnu.

Pour moi, l'erreur a été corrigée en ajoutant deux choses à ma configuration:

  1. Comme mentionné ci-dessus à plusieurs reprises, j'ai dû ajouter babel-polyfill dans mon tableau d'entrée webpack:

    ...
    
    entrée: ['babel-polyfill', './index.js'],
    
    ...
  2. J'avais besoin de mettre à jour mon .babelrc pour permettre la compilation de async / wait dans les générateurs:

    {
      "presets": ["es2015"],
      "plugins": ["transform-async-to-generator"]
    }

Dépendances de développement:

J'ai également dû installer quelques éléments dans mes devDependencies dans mon fichier package.json. À savoir, il me manquait le babel-plugin-transform-async-to-generator, babel-polyfill et le babel-preset-es2015:

 "devDependencies": {
    "babel-loader": "^6.2.2",
    "babel-plugin-transform-async-to-generator": "^6.5.0",
    "babel-polyfill": "^6.5.0",
    "babel-preset-es2015": "^6.5.0",
    "webpack": "^1.12.13"
 }

Gist Code complet:

J'ai obtenu le code d'un gist GitHub vraiment utile et concis que vous pouvez trouver ici .


3
Il vaut mieux utiliser preset envplutôt que es2015. envcomprend es2015déjà.
Neurotransmetteur

9

J'ai eu ce problème dans Chrome. Semblable à la réponse de RienNeVaPlu͢s, cela l'a résolu pour moi:

npm install --save-dev regenerator-runtime

Puis dans mon code:

import 'regenerator-runtime/runtime';

Heureux d'éviter les 200 Ko supplémentaires de babel-polyfill.


9

Cette erreur se produit lorsque les async/awaitfonctions sont utilisées sans les plug-ins Babel appropriés. À partir de mars 2020, ce qui suit devrait être tout ce que vous devez faire. ( @babel/polyfillet beaucoup de solutions acceptées ont été dépréciées dans Babel. En savoir plus dans les documents Babel. )

Dans la ligne de commande, tapez:

npm install --save-dev @babel/plugin-transform-runtime

Dans votre babel.config.jsfichier, ajoutez ce plugin @babel/plugin-transform-runtime. Remarque: l'exemple ci-dessous inclut les autres préréglages et plugins que j'ai pour un petit projet React / Node / Express sur lequel j'ai travaillé récemment:

module.exports = {
  presets: ['@babel/preset-react', '@babel/preset-env'],
  plugins: ['@babel/plugin-proposal-class-properties', 
  '@babel/plugin-transform-runtime'],
};

Ce qui m'étonne toujours, c'est la façon dont les développeurs sont paresseux. Les développeurs Babel ont décidé de déprécier les fonctionnalités, ils peuvent s'attendre à ce que cela devienne un problème. Pourquoi ne pas faire savoir aux gens quelle était l’intention la plus probable et ce qu’ils devraient faire pour y remédier. Mais non, montrons simplement un message qui est absolument inutile pour les débutants.
Pavel Voronin

Cela ne fonctionne pas imgur.com/a/2Ea8WDk
improbable

A très bien fonctionné pour moi. Mon projet sans réaction .babelrcressemble à ceci: `` `` {"presets": ["@ babel / preset-env"], "plugins": ["@ babel / plugin-transform-runtime"]} ``
Anthony

8

Vous obtenez une erreur car les générateurs d'utilisation asynchrone / attendent, qui sont une fonctionnalité ES2016, pas ES2015. Une façon de résoudre ce problème consiste à installer le préréglage babel pour ES2016 ( npm install --save babel-preset-es2016) et à compiler vers ES2016 au lieu de ES2015:

"presets": [
  "es2016",
  // etc...
]

Comme les autres réponses le mentionnent, vous pouvez également utiliser polyfills (mais assurez-vous de charger le polyfill avant de lancer tout autre code). Alternativement, si vous ne souhaitez pas inclure toutes les dépendances de polyfill, vous pouvez utiliser le babel-régénérateur-runtime ou le babel-plugin-transform-runtime .


7

J'ai corrigé cette erreur en installant babel-polyfill

npm install babel-polyfill --save

puis je l'ai importé dans le point d'entrée de mon application

import http from 'http';
import config from 'dotenv';
import 'babel-polyfill';
import { register } from 'babel-core';
import app from '../app';

pour les tests, j'ai inclus --requis babel-polyfill dans mon script de test

"test": "export NODE_ENV=test|| SET NODE_ENV=test&& mocha --compilers 
  js:babel-core/register --require babel-polyfill server/test/**.js --exit"

6

Nouvelle réponse Pourquoi suivez-vous ma réponse?

Ans: Parce que je vais vous donner une réponse avec le dernier projet de mise à jour de la version npm.

14/04/2017

"name": "es6",
 "version": "1.0.0",
   "babel-core": "^6.24.1",
    "babel-loader": "^6.4.1",
    "babel-polyfill": "^6.23.0",
    "babel-preset-es2015": "^6.24.1",
    "webpack": "^2.3.3",
    "webpack-dev-server": "^2.4.2"

Si vous utilisez cette version ou une version UP de Npm et toutes les autres ... il suffit donc de changer:

webpack.config.js

module.exports = {
  entry: ["babel-polyfill", "./app/js"]
};

Après avoir changé les webpack.config.jsfichiers, ajoutez simplement cette ligne en haut de votre code.

import "babel-polyfill";

Maintenant, vérifiez que tout va bien. LIEN de référence

Merci également à @BrunoLM pour sa belle réponse.


1
Pourquoi utiliserait-il webpack si c'est un service backend? Votre réponse implique qu'il doit utiliser webpack?
Spock

1
@Spock, j'y ai pensé. J'étais confronté au même problème et j'ai résolu mon problème de cette manière simple. Je pense que c'est une réponse positive pour les utilisateurs de Webpack et les lièvres ont plus de bonne réponse pour que vous puissiez suivre n'importe qui.
MD Ashik

Pourquoi vous pensez que vous devez appuyer sur Vote !!!! Pouvez-vous dire la raison si vous voulez m'aider.
MD Ashik

6

Les navigateurs ciblés que je dois prendre en charge prennent déjà en charge async / wait, mais lors de l'écriture de tests mocha, sans le paramètre approprié, j'ai toujours cette erreur.

La plupart des articles que je googlé sont obsolètes, y compris la réponse acceptée et haute réponses voté ici, à savoir que vous n'avez pas besoin polyfill, babel-regenerator-runtime, babel-plugin-transform-runtime. etc. si votre ou vos navigateurs cibles prennent déjà en charge async / wait (bien sûr, si vous n'avez pas besoin de polyfill)

Je ne veux pas non plus l'utiliser webpack.

La réponse de Tyler Long est en fait sur la bonne voie depuis qu'il l'a suggéré babel-preset-env(mais je l'ai d'abord omise car il a mentionné le polifill au début). J'ai quand même eu le ReferenceError: regeneratorRuntime is not definedpremier, puis j'ai réalisé que c'était parce que je n'avais pas fixé la cible. Après avoir défini la cible pour le nœud, je corrige l'erreur régénérateurRuntime:

  "scripts": {
    //"test": "mocha --compilers js:babel-core/register"
    //https://github.com/mochajs/mocha/wiki/compilers-deprecation
    "test": "mocha --require babel-core/register"
  },
  "devDependencies": {
    "babel-core": "^6.26.3",
    "babel-preset-env": "^1.7.0",
    "mocha": "^5.2.0"
  },
  //better to set it .bablerc, I list it here for brevity and it works too.
  "babel": {
    "presets": [
      ["env",{
        "targets": {
          "node": "current"
           "chrome": 66,
           "firefox": 60,
        },
        "debug":true
      }]
    ]
  }


4

1 - Installez la méthode babel-plugin-transform-async-to-module, babel-polyfil, bluebird, babel-preset-es2015, babel-core:

npm install babel-plugin-transform-async-to-module-method babel-polyfill bluebird babel-preset-es2015 babel-core

2 - Ajoutez votre polyfill js babel:

import 'babel-polyfill';

3 - Ajoutez un plugin dans votre .babelrc:

{
    "presets": ["es2015"],
    "plugins": [
      ["transform-async-to-module-method", {
        "module": "bluebird",
        "method": "coroutine"
      }]
    ]
}

Source: http://babeljs.io/docs/plugins/transform-async-to-module-method/


3

J'ai eu une configuration
avec webpack à l' aide presets: ['es2015', 'stage-0']
et mocha qui a été l' exécution des tests compilés par webpack.

Pour faire fonctionner mes async/awaittests in, tout ce que j'avais à faire était d'ajouter une mocha --require babel-polyfilloption.


3

J'obtiens cette erreur en utilisant gulp avec rollup lorsque j'ai essayé d'utiliser des générateurs ES6:

gulp.task('scripts', () => {
  return rollup({
    entry: './app/scripts/main.js',
    format: "iife",
    sourceMap: true,
    plugins: [babel({
      exclude: 'node_modules/**',
      "presets": [
        [
          "es2015-rollup"
        ]
      ],
      "plugins": [
        "external-helpers"
      ]
    }),
    includePaths({
      include: {},
      paths: ['./app/scripts'],
      external: [],
      extensions: ['.js']
    })]
  })

  .pipe(source('app.js'))
  .pipe(buffer())
  .pipe(sourcemaps.init({
    loadMaps: true
  }))
  .pipe(sourcemaps.write('.'))
  .pipe(gulp.dest('.tmp/scripts'))
  .pipe(reload({ stream: true }));
});

Il se peut que la solution consiste à inclure babel-polyfillcomme composant de tonnelle:

bower install babel-polyfill --save

et ajoutez-le comme dépendance dans index.html:

<script src="/bower_components/babel-polyfill/browser-polyfill.js"></script>

Je vous remercie. Cela a fonctionné pour moi. Je ne savais pas que je devais ajouter la balise de script pour que cela fonctionne du côté client.
Raza

3

Pour les personnes cherchant à utiliser la babel-polyfillversion 7 ^ faites-le avec la webpackver3 ^.

Npm installer le module npm i -D @babel/polyfill

Ensuite, dans votre webpackfichier dans votre entrypoint, procédez comme suit

entry: ['@babel/polyfill', path.resolve(APP_DIR, 'App.js')],

3

Ma chaudière de travail babel 7 pour réagir avec le temps de régénération du régénérateur:

.babelrc

{
  "presets": [
    [
      "@babel/preset-env",
      {
        "targets": {
          "node": true,
        },
      },
    ],
    "@babel/preset-react",
  ],
  "plugins": [
    "@babel/plugin-syntax-class-properties",
    "@babel/plugin-proposal-class-properties"
  ]
}

package.json

...

"devDependencies": {
  "@babel/core": "^7.0.0-0",
  "@babel/plugin-proposal-class-properties": "^7.4.4",
  "@babel/plugin-syntax-class-properties": "^7.2.0",
  "@babel/polyfill": "^7.4.4",
  "@babel/preset-env": "^7.4.5",
  "@babel/preset-react": "^7.0.0",
  "babel-eslint": "^10.0.1",
...

main.js

import "@babel/polyfill";

....

2

Si vous créez une application, vous avez juste besoin des @babel/preset-envet @babel/polyfill:

npm i -D @babel/preset-env
npm i @babel/polyfill

(Remarque: vous n'avez pas besoin d'installer les packages core-jset regenerator-runtimecar ils auront tous deux été installés par @ babel / polyfill)

Puis dans .babelrc:

{
  "presets": [
    [
      "@babel/preset-env",
      {
        "useBuiltIns": "entry"  // this is the key. use 'usage' for further codesize reduction, but it's still 'experimental'
      }
    ]
  ]
}

Définissez maintenant vos environnements cibles. Ici, nous le faisons dans le .browserslistrcfichier:

# Browsers that we support

>0.2%
not dead
not ie <= 11
not op_mini all

Enfin, si vous y allez useBuiltIns: "entry", mettezimport @babel/polyfill en haut de votre fichier d'entrée. Sinon, vous avez terminé.

L'utilisation de cette méthode importera de manière sélective ces polyfills et le fichier «régénérateur-runtime» (corrigeant votre regeneratorRuntime is not definedproblème ici) UNIQUEMENT s'ils sont nécessaires à l'un de vos environnements / navigateurs cibles.


2

pour référence future :

Depuis la version 7.0.0-beta.55 de Babel, les préréglages d'étape ont été supprimés

référez-vous au blog https://babeljs.io/blog/2018/07/27/removing-babels-stage-presets

async wait peut toujours être utilisé par

https://babeljs.io/docs/en/babel-plugin-transform-async-to-generator#usage

installation

npm install --save-dev @babel/plugin-transform-async-to-generator

utilisation dans .babelrc

 { 
     "presets": ["@babel/preset-env"],
     "plugins": ["@babel/plugin-transform-async-to-generator"]
 }

et en utilisant babel polyfill https://babeljs.io/docs/en/babel-polyfill

installation

npm install --save @babel/polyfill

webpack.config.js

module.exports = {
  entry: ["@babel/polyfill", "./app/js"],
};

2

En 2019 avec Babel 7.4.0+, le babel-polyfillpackage a été déconseillé au profit de l'inclusion directe core-js/stable( core-js@3+, pour les fonctionnalités ECMAScript de polyfill) et regenerator-runtime/runtime(nécessaire pour utiliser les fonctions de générateur transpilées):

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

Informations issues de la babel-polyfill documentation .


2

Le moyen le plus simple de résoudre ce «problème de régénérateur non défini» dans votre console:

Vous n'avez pas besoin d'installer de plugins inutiles. Ajoutez simplement:

<script src="https://unpkg.com/regenerator-runtime@0.13.1/runtime.js"></script>

à l'intérieur du corps dans votre index.html. Maintenant, régénérateurRuntime doit être défini une fois que vous exécutez babel et maintenant vos fonctions asynchrones / attendent doivent être compilées avec succès dans ES2015


1

Si vous utilisez Gulp + Babel pour une interface, vous devez utiliser babel-polyfill

npm install babel-polyfill

puis ajoutez une balise de script à index.html au-dessus de toutes les autres balises de script et référencez babel-polyfill à partir de node_modules


Je ne vois pas pourquoi le downvote et le commentaire. Je le voulais pour le navigateur Firefox. J'ai également pris les informations directement sur le site Web de babel lui-même. Le commentaire ne m'a pas aidé à résoudre le problème lorsque je l'ai essayé.
Petros Kyriakou
En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.