I'estou tentando usar async, aguarde do zero no Babel 6, mas I'estou obtendo regeneradorRuntime não está definido.
arquivo .babelrc
{
"presets": [ "es2015", "stage-0" ]
}
ficheiro package.json
"devDependencies": {
"babel-core": "^6.0.20",
"babel-preset-es2015": "^6.0.15",
"babel-preset-stage-0": "^6.0.15"
}
arquivo .js
"use strict";
async function foo() {
await bar();
}
function bar() { }
exports.default = foo;
Usá-lo normalmente sem a async/await funciona muito bem. Alguma idéia do que eu'estou fazendo de errado?
É necessário o "babel-polyfill". Você também deve instalá-lo para que o babel-polyfill
funcione.
npm i -D babel-core babel-polyfill babel-preset-es2015 babel-preset-stage-0 babel-loader
pacote.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 com async/await (código de amostra)
"use strict";
export default async function foo() {
var s = await bar();
console.log(s);
}
function bar() {
return "bar";
}
No arquivo de inicialização
require("babel-core/register");
require("babel-polyfill");
Se você está utilizando **webpack*** você precisa colocá-lo como o primeiro valor do seu array entry
no seu arquivo de configuração do webpack (geralmente webpack.config.js
), conforme o comentário @Cemen:
module.exports = {
entry: ['babel-polyfill', './test.js'],
output: {
filename: 'bundle.js'
},
module: {
loaders: [
{ test: /\.jsx?$/, loader: 'babel', }
]
}
};
Se você quiser fazer testes com o babel, então use:
mocha --compilers js:babel-core/register --require babel-polyfill
Além do polifill, eu uso babel-plugin-transform-runtime. O plugin é descrito como:
Externalize referências para ajudantes e construa, polifechando automaticamente o seu código sem poluir os globos. Mas o que é que isto realmente significa? Basicamente, você pode usar built-ins como Promise, Set, Symbol etc., bem como usar todos os recursos da Babel que requerem um polifill sem problemas, sem poluição global, tornando-o extremamente adequado para bibliotecas.
Também inclui suporte para async/await juntamente com outros built-ins do ES 6.
$ npm install --save-dev babel-plugin-transform-runtime
Em `.babelrc', adicione o plugin de tempo de execução
{
"plugins": [
["transform-runtime", {
"regenerator": true
}]
]
}
**Nota*** Se você'está usando o babel 7, o pacote foi renomeado para @babel/plugin-transform-runtime.
Alternativamente, se você não'não precisa de todos os módulos que o babel-polyfill
fornece, você pode apenas especificar o babel-regenerator-rununtime
na configuração do seu webpack:
module.exports = {
entry: ['babel-regenerator-runtime', './test.js'],
// ...
};
Ao usar webpack-dev-server com HMR, fazer isso reduziu o número de arquivos que ele tem que compilar em cada compilação por bastante tempo. Este módulo é instalado como parte do babel-polyfill', então se você já tem isso você're fine, caso contrário você pode instalá-lo separadamente com
npm i -D babel-regenerator-runtime'.