Estoy tratando de usar asíncrono, espero desde cero en Babel 6, pero obtengo regeneratorRuntime no está definido.

archivo .babelrc

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

archivo package.json

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

archivo .js

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

Usarlo normalmente sin async / await funciona bien. ¿Alguna idea de lo que estoy haciendo mal?

babel-polyfill( obsoleto a partir de Babel 7.4) es obligatorio. También debe instalarlo para que funcione asincrónico / en espera.

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 con async / await (código de muestra)

"use strict";

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

function bar() {
  return "bar";
}

En el archivo de inicio

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

Si está utilizando webpack , debe colocarlo como el primer valor de su entrymatriz en su archivo de configuración de webpack (generalmente webpack.config.js), según el comentario de @Cemen:

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

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

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

Si desea ejecutar pruebas con babel, use:

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

Además de polyfill, uso babel-plugin-transform-runtime . El complemento se describe como:

Externalice las referencias a los ayudantes y las incorporaciones, rellenando automáticamente su código sin contaminar a los globales. ¿Qué significa esto realmente? Básicamente, puede usar elementos integrados como Promise, Set, Symbol, etc., así como todas las funciones de Babel que requieren un polyfill sin problemas, sin contaminación global, lo que lo hace extremadamente adecuado para bibliotecas.

También incluye soporte para asíncrono / espera junto con otros elementos integrados de ES 6.

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

En .babelrc, agregue el complemento de tiempo de ejecución

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

Nota Si está utilizando babel 7, el paquete ha cambiado de nombre a @ babel / plugin-transform-runtime .

Babel 7 usuarios

Tuve algunos problemas para solucionar esto, ya que la mayoría de la información era para versiones anteriores de Babel. Para Babel 7, instale estas dos dependencias:

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

Y, en .babelrc, agregue:

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

Actualizar

Funciona si configura el objetivo en Chrome. Pero podría no funcionar para otros objetivos, consulte: https://github.com/babel/babel-preset-env/issues/112

Entonces, esta respuesta NO es adecuada para la pregunta original. Lo mantendré aquí como referencia babel-preset-env.

Una solución simple es agregar import 'babel-polyfill'al comienzo de su código.

Si usa webpack, una solución rápida es agregar babel-polyfillcomo se muestra a continuación:

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

Creo que he encontrado la mejor práctica más reciente.

Verifique este proyecto: https://github.com/babel/babel-preset-env

yarn add --dev babel-preset-env

Use lo siguiente como su configuración de babel:

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

Entonces su aplicación debería estar lista para usar en las últimas 2 versiones del navegador Chrome.

También puede establecer Nodo como objetivos o ajustar la lista de navegadores de acuerdo con https://github.com/ai/browserslist

Dime qué, no me digas cómo.

Me gusta mucho babel-preset-envla filosofía: dime qué entorno quieres soportar, NO me digas cómo apoyarlos. Es la belleza de la programación declarativa.

He probado async awaity funcionan. No sé cómo funcionan y realmente no quiero saberlo. Quiero pasar mi tiempo en mi propio código y en mi lógica de negocios. Gracias a babel-preset-env, me libera del infierno de configuración de Babel.

Alternativamente, si no necesita todos los módulos babel-polyfillproporcionados, puede especificar babel-regenerator-runtimeen la configuración de su paquete web:

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

  // ...
};

Cuando se usa webpack-dev-server con HMR, esto reduce la cantidad de archivos que tiene que compilar en cada compilación en gran medida. Este módulo se instala como parte, por babel-polyfilllo tanto, si ya tiene que está bien, de lo contrario, puede instalarlo por separado con npm i -D babel-regenerator-runtime.

Mi solución 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 o posterior (core-js 2/3)

A partir de Babel 7.4.0 , @babel/polyfill está en desuso .

En general, hay dos formas de instalar polyfills / regenerator: a través del espacio de nombres global (Opción 1) o como ponyfill (Opción 2, sin contaminación global).

Opción 1: @babel/preset-env

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

utilizará automáticamente regenerator-runtimey de core-jsacuerdo a su objetivo . No es necesario importar nada manualmente. No olvide instalar dependencias de tiempo de ejecución:

npm i --save regenerator-runtime core-js

Alternativamente, configúrelo useBuiltIns: "entry"e impórtelo manualmente:

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

Opción 2: @babel/transform-runtime con @babel/runtime(sin contaminación de alcance global)

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

Instalarlo:

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

Si usa core-js polyfills, instala @babel/runtime-corejs2o @babel/runtime-corejs3, en su lugar, consulte aquí .

Salud

babel-regenerator-runtimeahora está en desuso , en su lugar uno debería usar regenerator-runtime.

Para usar el generador de tiempo de ejecución con webpacky babelv7:

instalar regenerator-runtime:

npm i -D regenerator-runtime

Y luego agregue dentro de la configuración del paquete web:

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

Actualice su .babelrcarchivo de acuerdo con los siguientes ejemplos, funcionará.

Si estás usando el @babel/preset-envpaquete

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

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

Tenga cuidado con las funciones izadas

Tenía tanto mi 'importación de polyfill' como mi 'función asíncrona' en el mismo archivo, sin embargo, estaba usando la sintaxis de la función que lo eleva por encima del polyfill que me daría el ReferenceError: regeneratorRuntime is not defined error.

Cambiar este código

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

a esto

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

para evitar que se eleve por encima de la importación de polyfill.

A partir de octubre de 2019, esto funcionó para mí:

Agregue esto al preset.

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

Luego instale regenerator-runtime usando npm.

npm i regenerator-runtime

Y luego en el uso de su archivo principal: (esta importación se usa solo una vez)

import "regenerator-runtime/runtime";

Esto le permitirá usar async awaitsen su archivo y eliminar elregenerator error

Si lo usa babel-preset-stage-2, solo tiene que comenzar el script con --require babel-polyfill.

En mi caso, este error fue arrojado por las Mochapruebas.

Siguiente solucionó el problema

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

Comencé a recibir este error después de convertir mi proyecto en un proyecto mecanografiado. Por lo que entiendo, el problema proviene de async / esperar no ser reconocido.

Para mí, el error se solucionó agregando dos cosas a mi configuración:

1. Como se mencionó anteriormente muchas veces, necesitaba agregar babel-polyfill en mi matriz de entrada de paquete web:

   ...
   
   entrada: ['babel-polyfill', './index.js'],
   
   ...

2. Necesitaba actualizar mi .babelrc para permitir la compilación de async / await en generadores:

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

DevDependencies:

Tuve que instalar algunas cosas en mis devDependencies en mi archivo package.json también. A saber, me faltaba el babel-plugin-transform-async-to-generator, babel-polyfill y el 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"
 }

Código completo Gist:

Obtuve el código de un resumen de GitHub realmente útil y conciso que puedes encontrar aquí .

Tuve este problema en Chrome. Similar a la respuesta de RienNeVaPlu͢s, esto lo resolvió para mí:

npm install --save-dev regenerator-runtime

Luego en mi código:

import 'regenerator-runtime/runtime';

Feliz de evitar los 200 kB adicionales de babel-polyfill.

Este error se produce cuando las async/awaitfunciones se usan sin los complementos de Babel adecuados. A partir de marzo de 2020, lo siguiente debe ser todo lo que necesita hacer. ( @babel/polyfilly muchas de las soluciones aceptadas han quedado en desuso en Babel. Lea más en los documentos de Babel ) .

En la línea de comando, escriba:

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

En su babel.config.jsarchivo, agregue este complemento @babel/plugin-transform-runtime. Nota: El siguiente ejemplo incluye los otros presets y complementos que tengo para un pequeño proyecto React / Node / Express en el que trabajé recientemente:

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

Obtendrá un error porque los generadores asíncronos / en espera usan, que son una función ES2016, no ES2015. Una forma de solucionar esto es instalar el preajuste de babel para ES2016 ( npm install --save babel-preset-es2016) y compilar a ES2016 en lugar de ES2015:

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

Como mencionan las otras respuestas, también puede usar polyfills (aunque asegúrese de cargar el polyfill primero antes de que se ejecute cualquier otro código). Alternativamente, si no desea incluir todas las dependencias de polyfill, puede usar babel-regenerator-runtime o babel-plugin-transform-runtime .

Solucioné este error instalando babel-polyfill

npm install babel-polyfill --save

luego lo importé en el punto de entrada de mi aplicación

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

para probar incluí --require babel-polyfill en mi script de prueba

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

Nueva respuesta ¿Por qué sigues mi respuesta?

Respuesta: Porque voy a darle una respuesta con la última versión de actualización del proyecto 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 usa esta versión o más UP de Npm y todas las demás ... SO solo necesita cambiar:

webpack.config.js

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

Después de cambiar los webpack.config.jsarchivos, simplemente agregue esta línea a la parte superior de su código.

import "babel-polyfill";

Ahora verifique que todo esté bien. Link de referencia

También gracias @BrunoLM por su buena respuesta.

Los navegadores de destino que necesito admitir ya admiten async / wait, pero al escribir pruebas de mocha, sin la configuración adecuada, todavía recibí este error.

La mayoría de los artículos I Googled no están actualizados, incluyendo la respuesta y alta aceptada votaron respuestas aquí, es decir, que no es necesario polyfill, babel-regenerator-runtime, babel-plugin-transform-runtime. etc. si su (s) navegador (es) de destino ya es compatible con async / wait (por supuesto, si no necesita polyfill)

Yo tampoco quiero usar webpack.

La respuesta de Tyler Long está en el camino correcto ya que sugirió babel-preset-env(pero lo omití primero ya que mencionó polifill al principio). Todavía recibí el ReferenceError: regeneratorRuntime is not definedprimero y luego me di cuenta de que era porque no había establecido el objetivo. Después de establecer el objetivo para el nodo, reparo el error regeneratorRuntime ：

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

Para usuarios de babel7 y ParcelJS> = 1.10.0 usuarios

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

.babelrc

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

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

1 - Instalar babel-plugin-transform-async-to-module-method, 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 - Agregue su js babel polyfill:

import 'babel-polyfill';

3 - Agregue el complemento en su .babelrc:

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

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

Tenía una configuración
con webpack usando presets: ['es2015', 'stage-0']
y mocha que ejecutaba pruebas compiladas por webpack.

Para hacer que mis async/awaitpruebas funcionen, todo lo que tuve que hacer es agregar la mocha --require babel-polyfillopción.

Recibo este error al usar gulp con rollup cuando intenté usar generadores 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 }));
});

Puedo decir que la solución fue incluir babel-polyfillcomo componente Bower:

bower install babel-polyfill --save

y agregarlo como dependencia en index.html:

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

Para las personas que buscan usar la babel-polyfillversión 7 ^, haga esto con webpackver3 ^.

Npm instala el módulo npm i -D @babel/polyfill

Luego, en su webpackarchivo en su entrypunto, haga esto

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

Mi babel 7 boilerplate de trabajo para reaccionar con el tiempo de ejecución del regenerador:

.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 está creando una aplicación, solo necesita @babel/preset-envy @babel/polyfill:

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

(Nota: no necesita instalar los paquetes core-jsy regenerator-runtimeporque ambos se habrán instalado por @ babel / polyfill)

Luego en .babelrc:

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

Ahora configure sus entornos objetivo. Aquí lo hacemos en el .browserslistrcarchivo:

# Browsers that we support

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

Finalmente, si fuiste con useBuiltIns: "entry", ponimport @babel/polyfill en la parte superior de su archivo de entrada. De lo contrario, ya está.

El uso de este método importará selectivamente esos polyfills y el archivo 'regenerator-runtime' (solucionando su regeneratorRuntime is not definedproblema aquí) SOLAMENTE si los necesita cualquiera de sus entornos / navegadores de destino.

para referencia futura :

A partir de la versión 7.0.0-beta.55 de Babel, se han eliminado los preajustes de etapa

consulte el blog https://babeljs.io/blog/2018/07/27/removing-babels-stage-presets

async aguardando aún puede ser utilizado por

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

instalación

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

uso en .babelrc

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

y usando babel polyfill https://babeljs.io/docs/en/babel-polyfill

instalación

npm install --save @babel/polyfill

webpack.config.js

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

En 2019 con Babel 7.4.0+, el babel-polyfillpaquete ha quedado en desuso a favor de incluir directamente core-js/stable( core-js@3+, a las funciones de Polyfill ECMAScript) y regenerator-runtime/runtime(necesario para usar las funciones del generador transpilado):

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

Información de la babel-polyfill documentación .

La forma más fácil de solucionar este 'problema de regenerador en tiempo de ejecución no definido' en su consola:

No tiene que instalar complementos innecesarios. Solo agrega:

<script src="https://unpkg.com/[email protected]/runtime.js"></script>

dentro del cuerpo en su index.html. Ahora regeneratorRuntime debe definirse una vez que ejecute babel y ahora sus funciones asíncronas / de espera deben compilarse correctamente en ES2015

Si usa Gulp + Babel para una interfaz de usuario, debe usar babel-polyfill

npm install babel-polyfill

y luego agregue una etiqueta de script a index.html sobre todas las demás etiquetas de script y haga referencia a babel-polyfill desde node_modules