Jeg prøver å bruke async, vente fra bunnen av på Babel 6, men jeg får regeneratorRuntime er ikke definert.
.babelrc-fil
{
"presets": [ "es2015", "stage-0" ]
}
package.json-fil
"devDependencies": {
"babel-core": "^6.0.20",
"babel-preset-es2015": "^6.0.15",
"babel-preset-stage-0": "^6.0.15"
}
.js-fil
"use strict";
async function foo() {
await bar();
}
function bar() { }
exports.default = foo;
Å bruke den normalt uten async/await fungerer helt fint. Noen ideer om hva jeg gjør galt?
babel-polyfill
er påkrevd. Du må også installere det for å få async/await til å fungere.
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 med async/await (eksempelkode)
"use strict";
export default async function foo() {
var s = await bar();
console.log(s);
}
function bar() {
return "bar";
}
I oppstartsfilen
require("babel-core/register");
require("babel-polyfill");
Hvis du bruker webpack, må du sette den som den første verdien i entry
-matrisen i webpack-konfigurasjonsfilen (vanligvis webpack.config.js
), i henhold til @Cemen-kommentaren:
module.exports = {
entry: ['babel-polyfill', './test.js'],
output: {
filename: 'bundle.js'
},
module: {
loaders: [
{ test: /\.jsx?$/, loader: 'babel', }
]
}
};
Hvis du vil kjøre tester med babel så bruk:
mocha --compilers js:babel-core/register --require babel-polyfill
I tillegg til polyfill bruker jeg babel-plugin-transform-runtime. Plugin-en er beskrevet som:
Eksternaliser referanser til hjelpere og innebygde moduler, automatisk polyfylling av koden din uten å forurense globaler. Men hva betyr dette egentlig? I utgangspunktet kan du bruke innebygde funksjoner som Promise, Set, Symbol osv. samt bruke alle Babel-funksjonene som krever en polyfill sømløst, uten global forurensning, noe som gjør den ekstremt egnet for biblioteker.
Det inkluderer også støtte for async/await sammen med andre innebygde funksjoner i ES 6.
$ npm install --save-dev babel-plugin-transform-runtime
I .babelrc
legger du til runtime-plugin-modulen
{
"plugins": [
["transform-runtime", {
"regenerator": true
}]
]
}
Note Hvis du bruker babel 7, har pakken blitt omdøpt til @babel/plugin-transform-runtime.
Alternativt, hvis du ikke trenger alle modulene babel-polyfill
tilbyr, kan du bare spesifisere babel-regenerator-runtime
i webpack-konfigurasjonen:
module.exports = {
entry: ['babel-regenerator-runtime', './test.js'],
// ...
};
Når du bruker webpack-dev-server med HMR, reduserer dette antallet filer den må kompilere ved hver kompilering ganske mye. Denne modulen er installert som en del av babel-polyfill
, så hvis du allerede har den er det greit, ellers kan du installere den separat med npm i -D babel-regenerator-runtime
.