J'essaie d'utiliser async, await à partir de zéro sur Babel 6, mais je reçois le message suivant : regeneratorRuntime is not defined.
Fichier .babelrc
{
"presets": [ "es2015", "stage-0" ]
}
fichier package.json
"devDependencies": {
"babel-core": "^6.0.20",
"babel-preset-es2015": "^6.0.15",
"babel-preset-stage-0": "^6.0.15"
}
Fichier .js
"use strict";
async function foo() {
await bar();
}
function bar() { }
exports.default = foo;
L'utilisation normale sans async/await fonctionne très bien. Une idée de ce que je fais mal ?
babel-polyfill
est nécessaire. Vous devez également l'installer afin de faire fonctionner async/await.
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 avec async/await (exemple de code)
"use strict";
export default async function foo() {
var s = await bar();
console.log(s);
}
function bar() {
return "bar";
}
Dans le fichier de démarrage
require("babel-core/register");
require("babel-polyfill");
Si vous utilisez webpack, vous devez le mettre comme première valeur de votre tableau entry
dans votre fichier de configuration webpack (habituellement webpack.config.js
), comme dans le commentaire de @Cemen :
module.exports = {
entry: ['babel-polyfill', './test.js'],
output: {
filename: 'bundle.js'
},
module: {
loaders: [
{ test: /\.jsx?$/, loader: 'babel', }
]
}
};
Si vous voulez exécuter des tests avec babel, utilisez :
mocha --compilers js:babel-core/register --require babel-polyfill
Outre le polyfill, j'utilise [babel-plugin-transform-runtime] (https://babeljs.io/docs/en/6.26.3/babel-plugin-transform-runtime). Le plugin est décrit comme suit :
Externalize references to helpers and builtins, automatically polyfill your code without polluting globals. Mais qu'est-ce que cela signifie réellement ? En fait, vous pouvez utiliser des modules intégrés tels que Promise, Set, Symbol, etc. ainsi que toutes les fonctionnalités de Babel qui nécessitent un polyfill de manière transparente, sans pollution globale, ce qui en fait un outil très adapté aux bibliothèques.
Il inclut également le support d'async/await ainsi que d'autres built-ins de l'ES 6.
$ npm install --save-dev babel-plugin-transform-runtime
Dans .babelrc
, ajoutez le plugin d'exécution
{
"plugins": [
["transform-runtime", {
"regenerator": true
}]
]
}
Note Si vous utilisez babel 7, le paquet a été renommé en @babel/plugin-transform-runtime.
Alternativement, si vous n'avez pas besoin de tous les modules fournis par babel-polyfill
, vous pouvez simplement spécifier babel-regenerator-runtime
dans votre configuration webpack :
module.exports = {
entry: ['babel-regenerator-runtime', './test.js'],
// ...
};
En utilisant webpack-dev-server avec HMR, cela réduit considérablement le nombre de fichiers qu'il doit compiler à chaque construction. Ce module est installé comme partie de babel-polyfill
, donc si vous l'avez déjà, tout va bien, sinon vous pouvez l'installer séparément avec npm i -D babel-regenerator-runtime
.