Babel 6 regeneratorRuntime non è definito

Sto cercando di usare async, await da zero su Babel 6, ma sto ottenendo regeneratorRuntime non è definito.

File .babelrc

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

file package.json

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

file .js

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

Usandolo normalmente senza l'async/await funziona bene. Qualche idea su cosa sto sbagliando?

loganfsmyth
Domanda modificata 18º luglio 2017 в 9:45
Programmazione
javascript node.js babeljs
4º novembre 2015 в 4:58
1 vedi
Soluzione

babel-polyfill è richiesto. Devi anche installarlo per far funzionare async/await.

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

pacchetto.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 (codice di esempio)

"use strict";

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

function bar() {
  return "bar";
}

Nel file di avvio

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

Se stai usando webpack devi metterlo come primo valore del tuo array entry nel tuo file di configurazione di webpack (di solito webpack.config.js), come da commento di @Cemen:

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

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

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

Se vuoi eseguire i test con babel allora usa:

mocha --compilers js:babel-core/register --require babel-polyfill
MegaMatt
Risposta modificata 25º marzo 2019 в 7:46
Commentari (21)

Oltre a polyfill, uso babel-plugin-transform-runtime. Il plugin è descritto come:

Esternalizzare i riferimenti agli helper e ai builtin, polifillando automaticamente il tuo codice senza inquinare i globali. Ma cosa significa in realtà? Fondamentalmente, è possibile utilizzare i built-in come Promise, Set, Symbol ecc. così come utilizzare tutte le funzionalità di Babel che richiedono un polyfill senza soluzione di continuità, senza inquinamento globale, rendendolo estremamente adatto alle librerie.

Include anche il supporto per async/await insieme ad altri built-in di ES 6.

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

In .babelrc, aggiungere il plugin runtime

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

Nota Se stai usando babel 7, il pacchetto è stato rinominato in @babel/plugin-transform-runtime.

Jee Mok
Risposta modificata 18º settembre 2019 в 11:24
Commentari (13)

In alternativa, se non hai bisogno di tutti i moduli che babel-polyfill fornisce, puoi semplicemente specificare babel-regenerator-runtime nella tua configurazione di webpack:

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

  // ...
};

Quando si usa webpack-dev-server con HMR, questo riduce di molto il numero di file che deve compilare ad ogni compilazione. Questo modulo è installato come parte di babel-polyfill, quindi se lo hai già sei a posto, altrimenti puoi installarlo separatamente con npm i -D babel-regenerator-runtime.

Commentari (2)