Babel 6 regeneratorRuntime no está definido

Estoy intentando usar async, await desde cero en Babel 6, pero me sale que 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;

Usándolo normalmente sin el async/await funciona bien. ¿Alguna idea de lo que estoy haciendo mal?

loganfsmyth
Pregunta editada 18º julio 2017 в 9:45
Programación
javascript node.js babeljs
4º noviembre 2015 в 4:58
1 vista
Solución

Se necesita babel-polyfill. También debes instalarlo para que funcione async/await.

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

paquete.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 ejemplo)

"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ás usando webpack tienes que ponerlo como el primer valor de tu array entry en tu archivo de configuración de webpack (normalmente 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 quieres ejecutar pruebas con babel entonces usa:

mocha --compilers js:babel-core/register --require babel-polyfill
MegaMatt
Respuesta editada 25º marzo 2019 в 7:46
Comentarios (21)

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

Externalizar las referencias a los helpers y builtins, polyfilling automáticamente su código sin contaminar los globals. ¿Qué significa esto realmente? Básicamente, que puedes usar buildins como Promise, Set, Symbol, etc., así como usar todas las características de Babel que requieren un polyfill sin problemas, sin contaminación global, lo que lo hace extremadamente adecuado para las bibliotecas.

También incluye soporte para async/await junto con otros built-ins de ES 6.

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

En .babelrc, añade el plugin de tiempo de ejecución

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

Nota Si está utilizando babel 7, el paquete ha sido renombrado a @babel/plugin-transform-runtime.

Jee Mok
Respuesta editada 18º septiembre 2019 в 11:24
Comentarios (13)

Alternativamente, si no necesitas todos los módulos que proporciona babel-polyfill, puedes simplemente especificar babel-regenerator-runtime en tu configuración de webpack:

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

  // ...
};

Cuando se utiliza webpack-dev-server con HMR, hacer esto reduce el número de archivos que tiene que compilar en cada construcción por un montón. Este módulo se instala como parte de babel-polyfill, así que si ya lo tienes, puedes instalarlo por separado con npm i -D babel-regenerator-runtime.

Comentarios (2)