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?
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
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.
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
.