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?

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

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 .

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"]
    ]
}

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.

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.

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"
  ]
}

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é

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
]

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"
        }
      }
    ]
  ]
}

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.

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 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

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 .

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.

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'],
};

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 .

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"

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.

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
      }]
    ]
  }

Aux utilisateurs babel7 et ParcelJS> = 1.10.0 utilisateurs

npm i @babel/runtime-corejs2
npm i --save-dev @babel/plugin-transform-runtime @babel/core

.babelrc

{
  "plugins": [
    ["@babel/plugin-transform-runtime", {
      "corejs": 2
    }]
  ]
}

extrait de https://github.com/parcel-bundler/parcel/issues/1762

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/

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.

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>

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')],

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";

....

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.

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"],
};

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 .

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/[email protected]/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

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