Babel 6 regeneratorRuntime ei ole määritelty

Yritän käyttää async, await tyhjästä Babel 6:ssa, mutta saan regeneratorRuntime ei ole määritelty.

.babelrc-tiedosto

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

package.json-tiedosto

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

.js-tiedosto

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

Sen käyttäminen normaalisti ilman async/awaitia toimii hienosti. Onko ideoita, mitä teen väärin?

loganfsmyth
Muokattu kysymysT11 heinäkuu 2017 в 9:45
Ohjelmointi
javascript node.js babeljs
T22 marraskuu 2015 в 4:58
5 näkymät
Ratkaisu

babel-polyfill vaaditaan. Sinun on myös asennettava se, jotta saat async/await:n toimimaan.

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 ja async/await (esimerkkikoodi)

"use strict";

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

function bar() {
  return "bar";
}

Käynnistystiedostossa

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

Jos käytät webpackia, sinun on laitettava se entry-määritteen ensimmäiseksi arvoksi webpackin konfiguraatiotiedostossa (yleensä webpack.config.js), kuten @Cemen kommentoi:

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

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

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

Jos haluat ajaa testejä babelilla, käytä:

mocha --compilers js:babel-core/register --require babel-polyfill
MegaMatt
Muokattu vastausta T00 maaliskuu 2019 в 7:46
Kommentit (21)

Polyfillin lisäksi käytän babel-plugin-transform-runtime. Lisäosa on kuvattu seuraavasti:

Externalize references to helpers and builtins, automatically polyfilling your code without polluting globals. Mitä tämä oikeastaan tarkoittaa? Periaatteessa voit käyttää sisäänrakennettuja lisäosia, kuten Promise, Set, Symbol jne. sekä käyttää kaikkia Babelin ominaisuuksia, jotka vaativat polyfillin saumattomasti, ilman globaalia saastumista, mikä tekee siitä erittäin sopivan kirjastoille.

Se sisältää myös tuen async/awaitille sekä muille ES 6:n sisäänrakennetuille lisäosille.

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

Lisää tiedostoon .babelrc ajoaikaliitännäinen lisäosa

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

Huomautus Jos käytät babel 7:ää, paketti on nimetty uudelleen muotoon @babel/plugin-transform-runtime.

Jee Mok
Muokattu vastausta T22 syyskuu 2019 в 11:24
Kommentit (13)

Vaihtoehtoisesti, jos et tarvitse kaikkia moduuleja, joita babel-polyfill tarjoaa, voit vain määrittää babel-regenerator-runtime webpackin konfiguraatiossa:

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

  // ...
};

Kun käytit webpack-dev-palvelinta HMR:n kanssa, tämä vähensi melko paljon niiden tiedostojen määrää, jotka sen täytyy kääntää jokaisessa buildissa. Tämä moduuli asennetaan osana babel-polyfilliä, joten jos sinulla on jo se, olet kunnossa, muuten voit asentaa sen erikseen komennolla npm i -D babel-regenerator-runtime.

Kommentit (2)