Ik'm probeer async te gebruiken, await vanuit het niets op Babel 6, maar ik'm krijg regeneratorRuntime is niet gedefinieerd.
.babelrc bestand
{
"presets": [ "es2015", "stage-0" ]
}
package.json bestand
"devDependencies": {
"babel-core": "^6.0.20",
"babel-preset-es2015": "^6.0.15",
"babel-preset-stage-0": "^6.0.15"
}
.js bestand
"use strict";
async function foo() {
await bar();
}
function bar() { }
exports.default = foo;
Normaal gebruik zonder de async/await werkt prima. Iemand een idee wat ik verkeerd doe?
babel-polyfill
is vereist. U moet het ook installeren om async/await werkend te krijgen.
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 met async/await (voorbeeldcode)
"use strict";
export default async function foo() {
var s = await bar();
console.log(s);
}
function bar() {
return "bar";
}
In het opstart bestand
require("babel-core/register");
require("babel-polyfill");
Als u webpack gebruikt, moet u het als de eerste waarde van uw entry
array in uw webpack configuratiebestand zetten (meestal webpack.config.js
), zoals @Cemen opmerkt:
module.exports = {
entry: ['babel-polyfill', './test.js'],
output: {
filename: 'bundle.js'
},
module: {
loaders: [
{ test: /\.jsx?$/, loader: 'babel', }
]
}
};
Als u tests wilt uitvoeren met babel gebruik dan:
mocha --compilers js:babel-core/register --require babel-polyfill
Naast polyfill, gebruik ik babel-plugin-transform-runtime. De plugin wordt beschreven als:
Externalize references to helpers and builtins, automatically polyfill your code without polluting globals. Maar wat betekent dit eigenlijk? In principe kun je built-ins zoals Promise, Set, Symbol etc gebruiken, maar ook alle Babel functies die een polyfill vereisen naadloos, zonder globale vervuiling, waardoor het uitermate geschikt is voor bibliotheken.
Het bevat ook ondersteuning voor async/await samen met andere built-ins van ES 6.
$ npm install --save-dev babel-plugin-transform-runtime
In .babelrc
, voeg de runtime plugin
{
"plugins": [
["transform-runtime", {
"regenerator": true
}]
]
}
Note Als u'babel 7 gebruikt, is het pakket hernoemd naar @babel/plugin-transform-runtime.
Als alternatief, als u niet alle modules babel-polyfill
nodig heeft, kunt u gewoon babel-regenerator-runtime
specificeren in uw webpack config:
module.exports = {
entry: ['babel-regenerator-runtime', './test.js'],
// ...
};
Bij gebruik van webpack-dev-server met HMR, verminderde dit het aantal bestanden dat het moest compileren bij elke build met een flink aantal. Deze module wordt geïnstalleerd als onderdeel van babel-polyfill
, dus als je dat al hebt, zit je goed, anders kun je het apart installeren met npm i -D babel-regenerator-runtime
.