Babel 6 regenerator El tiempo de ejecución no está definido


634

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?


¿Has incluido regenerador?
ssube

3
babel-polyfill es lo que necesitas.
Ronnie Royston

babel-polyfill se ha depreciado a partir de 7.4; esta actualización así que la publicación describe la migración.
JWCS

Para aquellos que usan versiones más recientes de babel y node: stackoverflow.com/a/62254909/8169904
Lun

Respuestas:


682

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

77
Importante cuando se está utilizando babel con webpack: en lugar de utilizar require("babel-polyfill")que no está trabajando, se agrega "babel-polyfill"en su entryen config, así: entry: ["babel-polyfill", "src/main.js"]. Esto funcionó para mí, incluido el uso en webpack-dev-server con HMR.
Cemen

66
Estaba tratando de hacer que mis pruebas de mocha se ejecutaran con babel6 y async y tuve que agregar --require babel-polyfill a la configuración del corredor de prueba
npm

13
¿Para qué sirve babel-register?
trusktr

66
@Lloyd devDependencysi está usando webpack porque luego "compilará" los archivos antes de ejecutarlos. dependencysi no está utilizando webpack y necesita babel.
BrunoLM

44
Esto hace que el tamaño del archivo de salida sea enorme ... Es mejor usar solo lo que necesita en lugar de requerir directamente babel-polyfill.
Inanc Gumus

342

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 .


11
No necesitaba babel-runtimeque async esperara a funcionar. ¿Es eso correcto? Editar: estoy ejecutando el lado del servidor de código. :)
GijsjanB

8
Si pudo usarlo sin babel-runtime, es porque ya está en su árbol de dependencias. Así que tenga en cuenta que si está escribiendo una biblioteca, y el tiempo de ejecución de babel está llegando como una dependencia de desarrollo, es posible que no esté disponible para sus usuarios. Deberá incluirlo como una dependencia normal para la distribución.
neverfox

23
solo babel-plugin-transform-runtimerequerido Funciona de maravilla.
Saike

99
Esta solución no está bien porque requiere un trabajo adicional de Browserify o Webpack para expandir las requirellamadas que agrega el transform-runtimecomplemento.
Finesse

99
Tenga en cuenta que para Babel 7 debe corrernpm install --save-dev @babel/plugin-transform-runtime
Andrey Semakin

197

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

Cómo podemos hacerlo sin .babelrc (solo usando el archivo de configuración webpack)
Pouya Jabbarisani

2
El documento muestra el uso como "plugins": ["@babel/plugin-transform-runtime"], en lugar del "plugins": [ ["@babel/transform-runtime"] ]aquí. Nombre de complemento diferente. Ambas obras. ¿Pero cuál es el adecuado? ..
kyw

55
Obtengo require no está definido cuando sigo este método
Batman

1
@kyw es mejor seguir siempre los documentos, sin otra diferencia que la convención.
Matt Shirley

44
Agregar @babel/transform-runtimea los complementos me causó el error "las exportaciones no están definidas". Lo cambié a esto para que asincrónico funcione en Babel7:["@babel/plugin-transform-runtime", { "regenerator": true } ]
Hari

105

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.


3
Esto realmente funciona. El único inconveniente es un montón de dependencias extraídas, babel-preset-envpero creo que vale la pena. Me encanta el estilo declarativo también. También yarn installes ahorayarn add
Roman Usherenko

1
@gargantuan Sí, lo hace.
Tyler Long

3
Realmente no es una solución si desea apuntar a navegadores más antiguos o versiones de nodos.
Rohan Orton

2
En caso de que no sea obvio ... esta solución recomendada NO funcionará si necesita que su código funcione en IE11
Maurice

77
¿Por qué esto tiene tantos votos? Esto solo funciona porque ya no transforma async / wait y, por lo tanto, ya no necesita el regeneratorRuntime y porque no está transformado, no funcionará en navegadores que no lo admitan.
Shikyo

47

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.


Esta parece ser la solución más conveniente. Sin embargo, la mayoría de los navegadores admiten generadores, por lo que esta solución probablemente no sea la óptima. Ver: blogs.candoerz.com/question/213492/…
Kitanotori

¿Qué pasa si no estás usando webpack?
Batman

38

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

1
Te falta "transform-async-to-generator" en complementos. Tuve que agregar eso también para que funcione
GabrielBB

@GabrielBB He editado la publicación, así que es un ejemplo completo.
webnoob

2
Es loose: truenecesario?
Tom Söderlund

Al usar esto, agrega require a mi archivo y require no está definido en el navegador.
Batman

flojo: verdadero no es necesario. Lo que realmente necesita en su .babelrc es: {"presets": ["es2015", "react", "stage-2"], "plugins": ["transform-runtime", "transform-async-to-generator "]}
Efe Ariaroo

29

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


2
Esta es la respuesta correcta y más actualizada y me ayudó con un problema en mi proyecto actual. ¡Gracias!
cdpautsch

2
{"presets": [["@ babel / preset-env", {"target": {"esmodules": true}}]]} Esto me ha ayudado a construir un node.js
Smolin Pavel

3
Quiero decir que ya lo sabía, pero ayudar a otros debería ser la respuesta correcta. ¡Atentamente!
Niewiadomski Paweł

Nota: Creo que tiene sentido usar el hilo de Babel 7 , por lo que los errores relacionados con la versión se pueden distinguir mejor. Puede encontrar una versión más específica de esta respuesta aquí (pero las declaraciones anteriores siguen siendo ciertas)
ford04

16

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
]

Esta debería ser la respuesta aceptada, babel-polyfill agrega demasiadas cosas más
Shikyo

Trabajo perfecto para mí ... Muchas gracias
Leandro William

1
Sin embargo, este método siempre incluye el tiempo de ejecución. Creo que contradice el objetivo de @babel/preset-env's useBuiltInsde insertar de forma dinámica en tiempo de ejecución basado en los navegadores de destino.
kyw

13

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

2
¿Podría explicar su respuesta? qué hace "node": "current"
Vishal Solanki

También me gustaría saber qué hace esto y si es una solución recomendada, es decir, no pone en peligro nada y es "a prueba de futuro" (tanto como cualquier cosa puede ser en este momento). targetsparece referirse a este : the environments you support/target for your project, mientras que targets.nodees esta : 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, utilicé el segundo bloque definido en la respuesta (y eliminado "stage-0"en el proceso) y el error del regenerador desapareció.
user1063287

1
@BunkerBoy Para mayor comodidad, puede usar "node": "current" para incluir solo los polyfills y transformaciones necesarios para la versión Node.js que usa para ejecutar Babel
Zero

entonces para esto no tengo que instalar polyfills?
Vishal Solanki el

12

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.


55
a; kgjablrsdkjfjasnkljfbajklfdablkhjnfl; triste me estaba volviendo loco y me has salvado Te amo
John R Perry

11

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 no establece un valor, el valor useBuiltInspredeterminado será false. Esto no importará automáticamente ningún polyfills según el entorno de destino, lo que socava el propósito de "@babel/preset-env". Aquí también hay un comentario relacionado de uno de los desarrolladores de babel.
bela53

10

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


9

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


3
Es mejor usar preestablecido en envlugar de es2015. envincluye es2015ya.
Neurotransmisor

9

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.


9

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

Lo que siempre me sorprende es cómo los desarrolladores son flojos. Los desarrolladores de Babel decidieron desaprobar la funcionalidad, pueden esperar que esto se convierta en un problema. ¿Por qué no dejar que las personas sepan cuál era la intención más probable y qué deberían hacer para solucionarlo? Pero no, vamos a mostrar un mensaje que es absolutamente inútil para los novatos.
Pavel Voronin

Esto no funciona imgur.com/a/2Ea8WDk
improbable

Funcionó muy bien para mí. Mi proyecto sin reacción se .babelrcve así: `` `{{presets": ["@ babel / preset-env"], "plugins": ["@ babel / plugin-transform-runtime"]} `` `
Anthony

8

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 .


7

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"

6

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.


1
¿Por qué usaría webpack si es un servicio de backend? ¿Su respuesta implica que tiene que usar webpack?
Spock

1
@Spock, lo pensé. Estaba enfrentando el mismo problema y resolví mi problema de esta manera simple. Creo que es una respuesta positiva para el usuario de Webpack y tenemos más respuestas correctas para que pueda seguir a cualquier otro.
MD Ashik

¿Por qué crees que necesitas presionar Votar! ¿Puedes decir razón si quieres ayudarme?
MD Ashik

6

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


4

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/


3

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.


3

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>

Gracias. Esto funcionó para mí. No sabía que necesitaba agregar la etiqueta del script para que funcione en el lado del cliente.
Raza

3

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

3

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

....

2

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.


2

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

2

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 .


2

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/regenerator-runtime@0.13.1/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


1

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


No veo por qué el voto negativo y el comentario. Lo quería para el navegador Firefox. También tomé la información directamente del sitio web de Babel. El comentario no me ayudó a resolver el problema cuando lo probé.
Petros Kyriakou
Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.