Estou tentando usar assíncrono, aguarde do zero no Babel 6, mas estou obtendo regeneratorRuntime não está definido.

arquivo .babelrc

{
    "presets": [ "es2015", "stage-0" ]
}

arquivo 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 o async / waitit funciona muito bem. Alguma idéia do que estou fazendo de errado?

babel-polyfill( descontinuado a partir do Babel 7.4) é necessário. Você também deve instalá-lo para obter o funcionamento assíncrono / aguardado.

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 com async / waitit (código de exemplo)

"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ê estiver usando o webpack, precisará colocá-lo como o primeiro valor da sua entrymatriz no arquivo de configuração do webpack (normalmente webpack.config.js), conforme o comentário do @Cemen:

module.exports = {
  entry: ['babel-polyfill', './test.js'],

  output: {
    filename: 'bundle.js'       
  },

  module: {
    loaders: [
      { test: /\.jsx?$/, loader: 'babel', }
    ]
  }
};

Se você deseja executar testes com o babel, use:

mocha --compilers js:babel-core/register --require babel-polyfill

Além do polyfill, eu uso o babel-plugin-transform-runtime . O plug-in é descrito como:

Externalize referências a auxiliares e componentes internos, automaticamente preenchendo seu código sem poluir os globais. O que isso realmente significa? Basicamente, você pode usar built-ins como Promise, Set, Symbol etc., além de usar todos os recursos do Babel que exigem um polyfill sem problemas, sem poluição global, tornando-o extremamente adequado para bibliotecas.

Também inclui suporte para assíncrono / espera, juntamente com outros recursos internos do ES 6.

$ npm install --save-dev babel-plugin-transform-runtime

Em .babelrc, adicione o plug-in de tempo de execução

{
  "plugins": [
    ["transform-runtime", {
      "regenerator": true
    }]
  ]
}

Nota Se você estiver usando o babel 7, o pacote foi renomeado para @ babel / plugin-transform-runtime .

Babel 7 Usuários

Eu tive alguns problemas para contornar isso, pois a maioria das informações era para versões anteriores do babel. Para o Babel 7, instale estas duas dependências:

npm install --save @babel/runtime 
npm install --save-dev @babel/plugin-transform-runtime

E, em .babelrc, adicione:

{
    "presets": ["@babel/preset-env"],
    "plugins": [
        ["@babel/transform-runtime"]
    ]
}

Atualizar

Funciona se você definir o destino para o Chrome. Mas pode não funcionar para outros destinos, consulte: https://github.com/babel/babel-preset-env/issues/112

Portanto, essa resposta NÃO é adequada para a pergunta original. Vou mantê-lo aqui como referência babel-preset-env.

Uma solução simples é adicionar import 'babel-polyfill'no início do seu código.

Se você usa o webpack, uma solução rápida é adicionar babel-polyfillcomo mostrado abaixo:

entry: {
    index: ['babel-polyfill', './index.js']
}

Acredito que encontrei as melhores práticas mais recentes.

Verifique este projeto: https://github.com/babel/babel-preset-env

yarn add --dev babel-preset-env

Use o seguinte como sua configuração de babel:

{
  "presets": [
    ["env", {
      "targets": {
        "browsers": ["last 2 Chrome versions"]
      }
    }]
  ]
}

Em seguida, seu aplicativo deve estar disponível nas duas últimas versões do navegador Chrome.

Você também pode definir o Node como alvos ou ajustar a lista de navegadores de acordo com https://github.com/ai/browserslist

Diga-me o que, não me diga como.

Eu realmente gosto babel-preset-envda filosofia: diga-me qual ambiente você deseja apoiar, NÃO me diga como apoiá-los. É a beleza da programação declarativa.

Eu testei async awaite eles funcionam. Eu não sei como eles funcionam e eu realmente não quero saber. Quero gastar meu tempo com meu próprio código e minha lógica de negócios. Graças a babel-preset-envisso, me liberta do inferno da configuração de Babel.

Como alternativa, se você não precisar de todos os módulos babel-polyfillfornecidos, basta especificar babel-regenerator-runtimena sua configuração do webpack:

module.exports = {
  entry: ['babel-regenerator-runtime', './test.js'],

  // ...
};

Ao usar o webpack-dev-server com HMR, isso reduziu bastante o número de arquivos que ele precisa compilar em cada compilação. Este módulo é instalado como parte dele, babel-polyfillportanto, se você já tem o seu bem, caso contrário, poderá instalá-lo separadamente com npm i -D babel-regenerator-runtime.

Minha solução simples:

npm install --save-dev babel-plugin-transform-runtime
npm install --save-dev babel-plugin-transform-async-to-generator

.babelrc

{
  "presets": [
    ["latest", {
      "es2015": {
        "loose": true
      }
    }],
    "react",
    "stage-0"
  ],
  "plugins": [
    "transform-runtime",
    "transform-async-to-generator"
  ]
}

Babel 7.4.0 ou posterior (core-js 2/3)

A partir do Babel 7.4.0 , @babel/polyfill foi preterido .

Em geral, existem duas maneiras de instalar polyfills / regenerator: via namespace global (opção 1) ou como ponyfill (opção 2, sem poluição global).

Opção 1: @babel/preset-env

presets: [
  ["@babel/preset-env", {
    useBuiltIns: "usage",
    corejs: 3, // or 2,
    targets: {
        firefox: "64", // or whatever target to choose .    
    },
  }]
]

usará automaticamente regenerator-runtimee de core-jsacordo com o seu objetivo . Não há necessidade de importar nada manualmente. Não se esqueça de instalar dependências de tempo de execução:

npm i --save regenerator-runtime core-js

Como alternativa, defina useBuiltIns: "entry"e importe-o manualmente:

import "regenerator-runtime/runtime";
import "core-js/stable"; // if polyfills are also needed

Opção 2: @babel/transform-runtime com @babel/runtime(sem poluição no escopo global)

{
  "plugins": [
    [
      "@babel/plugin-transform-runtime",
      {
        "regenerator": true,
        corejs: 3 // or 2; if polyfills needed
        ...
      }
    ]
  ]
}

Instale-o:

npm i -D @babel/plugin-transform-runtime
npm i @babel/runtime

Se você usa polyfills core-js, instala @babel/runtime-corejs2ou @babel/runtime-corejs3, em vez disso, consulte aqui .

Felicidades

babel-regenerator-runtimeagora está obsoleto , em vez disso, deve-se usar regenerator-runtime.

Para usar o gerador de tempo de execução com webpacke babelv7:

instalar regenerator-runtime:

npm i -D regenerator-runtime

E depois adicione na configuração do webpack:

entry: [
  'regenerator-runtime/runtime',
  YOUR_APP_ENTRY
]

Atualize seu .babelrcarquivo de acordo com os seguintes exemplos, ele funcionará.

Se você estiver usando o @babel/preset-envpacote

{
  "presets": [
    [
      "@babel/preset-env", {
        "targets": {
          "node": "current"
        }
      }
    ]
  ]
}
or if you are using babel-preset-env package

{
  "presets": [
    [
      "env", {
        "targets": {
          "node": "current"
        }
      }
    ]
  ]
}

Cuidado com as funções de elevação

Eu tinha minha 'importação de polyfill' e minha 'função assíncrona' no mesmo arquivo, no entanto, estava usando a sintaxe da função que a eleva acima do polyfill, o que me daria o ReferenceError: regeneratorRuntime is not definederro.

Alterar este código

import "babel-polyfill"
async function myFunc(){ }

para isso

import "babel-polyfill"
var myFunc = async function(){}

para impedir que ele seja içado acima da importação do polyfill.

Em outubro de 2019, isso funcionou para mim:

Adicione isso à predefinição.

 "presets": [
      "@babel/preset-env"
    ]

Em seguida, instale o regenerator-runtime usando o npm.

npm i regenerator-runtime

E então, no arquivo principal, use: (essa importação é usada apenas uma vez)

import "regenerator-runtime/runtime";

Isso permitirá que você use async awaitsem seu arquivo e remova oregenerator error

Se estiver usando babel-preset-stage-2, basta iniciar o script --require babel-polyfill.

No meu caso, esse erro foi gerado por Mochatestes.

Após corrigir o problema

mocha \"server/tests/**/*.test.js\" --compilers js:babel-register --require babel-polyfill

Comecei a receber esse erro depois de converter meu projeto em um projeto datilografado. Pelo que entendi, o problema decorre de async / aguarda não ser reconhecido.

Para mim, o erro foi corrigido adicionando duas coisas à minha configuração:

1. Como mencionado acima, muitas vezes, eu precisei adicionar o babel-polyfill ao meu array de entradas do webpack:

   ...
   
   entrada: ['babel-polyfill', './index.js'],
   
   ...

2. Eu precisava atualizar meu .babelrc para permitir a complementação de async / waitit em geradores:

   {
     "presets": ["es2015"],
     "plugins": ["transformar-assíncrono em gerador"]
   }

DevDependencies:

Eu tive que instalar algumas coisas no meu devDependencies no meu arquivo package.json também. Ou seja, estava faltando o babel-plugin-transform-async-to-generator, o babel-polyfill e o babel-preset-es2015:

 "devDependencies": {
    "babel-loader": "^6.2.2",
    "babel-plugin-transform-async-to-generator": "^6.5.0",
    "babel-polyfill": "^6.5.0",
    "babel-preset-es2015": "^6.5.0",
    "webpack": "^1.12.13"
 }

Lista completa do código:

Eu obtive o código de uma essência do GitHub realmente útil e concisa que você pode encontrar aqui .

Eu tive esse problema no Chrome. Semelhante à resposta de RienNeVaPlu, isso resolveu para mim:

npm install --save-dev regenerator-runtime

Então no meu código:

import 'regenerator-runtime/runtime';

Feliz em evitar os 200 kB extras de babel-polyfill.

Este erro é causado quando async/awaitfunções são usadas sem os plugins Babel adequados. Em março de 2020, você deve fazer o seguinte. ( @babel/polyfille muitas das soluções aceitas foram preteridas em Babel. Leia mais nos documentos da Babel. )

Na linha de comando, digite:

npm install --save-dev @babel/plugin-transform-runtime

No seu babel.config.jsarquivo, adicione este plugin @babel/plugin-transform-runtime. Nota: O exemplo abaixo inclui as outras predefinições e plugins que tenho para um pequeno projeto React / Node / Express em que trabalhei recentemente:

module.exports = {
  presets: ['@babel/preset-react', '@babel/preset-env'],
  plugins: ['@babel/plugin-proposal-class-properties', 
  '@babel/plugin-transform-runtime'],
};

Você está recebendo um erro porque os geradores de uso assíncrono / aguardado, que são um recurso do ES2016, não do ES2015. Uma maneira de corrigir isso é instalar a predefinição de babel para o ES2016 ( npm install --save babel-preset-es2016) e compilar no ES2016 em vez do ES2015:

"presets": [
  "es2016",
  // etc...
]

Como as outras respostas mencionam, você também pode usar polyfills (embora certifique-se de carregar o polyfill primeiro antes da execução de qualquer outro código). Como alternativa, se você não deseja incluir todas as dependências do polyfill, pode usar o tempo de execução do babel-regenerator ou o tempo de execução do babel-plugin-transform-runtime .

Corrigi esse erro instalando o babel-polyfill

npm install babel-polyfill --save

então eu o importei no ponto de entrada do meu aplicativo

import http from 'http';
import config from 'dotenv';
import 'babel-polyfill';
import { register } from 'babel-core';
import app from '../app';

para teste eu incluí --require babel-polyfill no meu script de teste

"test": "export NODE_ENV=test|| SET NODE_ENV=test&& mocha --compilers 
  js:babel-core/register --require babel-polyfill server/test/**.js --exit"

Nova resposta Por que você segue minha resposta?

Resp: Porque eu vou lhe dar uma resposta com o projeto npm da versão mais recente da atualização.

14/04/2017

"name": "es6",
 "version": "1.0.0",
   "babel-core": "^6.24.1",
    "babel-loader": "^6.4.1",
    "babel-polyfill": "^6.23.0",
    "babel-preset-es2015": "^6.24.1",
    "webpack": "^2.3.3",
    "webpack-dev-server": "^2.4.2"

Se você usar esta versão ou mais versão UP do Npm e todas as outras ... SO, basta alterar:

webpack.config.js

module.exports = {
  entry: ["babel-polyfill", "./app/js"]
};

Depois de alterar os webpack.config.jsarquivos Basta adicionar esta linha ao topo do seu código.

import "babel-polyfill";

Agora verifique se está tudo bem. LINK de referência

Agradeço também ao @BrunoLM por sua ótima resposta.

Os navegadores direcionados que eu preciso suportar já suportam async / waitit, mas ao escrever testes mocha, sem a configuração adequada, ainda recebi esse erro.

A maioria dos artigos que eu pesquisei estão desatualizados, incluindo a resposta aceita e alta votou respostas aqui, ou seja, você não precisa polyfill, babel-regenerator-runtime, babel-plugin-transform-runtime. etc., se o (s) navegador (s) de destino já suportar assíncrono / aguardar (é claro, se não precisar do polyfill)

Também não quero usar webpack.

A resposta de Tyler Long está realmente no caminho certo, desde que ele sugeriu babel-preset-env(mas eu o omiti primeiro, como ele mencionou o polifill no início). Ainda consegui o ReferenceError: regeneratorRuntime is not definedprimeiro e percebi que era porque não havia definido o alvo. Depois de definir o destino para o nó, corrijo o erro regeneratorRuntime:

  "scripts": {
    //"test": "mocha --compilers js:babel-core/register"
    //https://github.com/mochajs/mocha/wiki/compilers-deprecation
    "test": "mocha --require babel-core/register"
  },
  "devDependencies": {
    "babel-core": "^6.26.3",
    "babel-preset-env": "^1.7.0",
    "mocha": "^5.2.0"
  },
  //better to set it .bablerc, I list it here for brevity and it works too.
  "babel": {
    "presets": [
      ["env",{
        "targets": {
          "node": "current"
           "chrome": 66,
           "firefox": 60,
        },
        "debug":true
      }]
    ]
  }

Para usuários babel7 e ParcelJS> = 1.10.0 users

npm i @babel/runtime-corejs2
npm i --save-dev @babel/plugin-transform-runtime @babel/core

.babelrc

{
  "plugins": [
    ["@babel/plugin-transform-runtime", {
      "corejs": 2
    }]
  ]
}

extraído de https://github.com/parcel-bundler/parcel/issues/1762

1 - Instale o método babel-plugin-transform-async-to-module-method, babel-polyfil, bluebird, babel-preset-es2015, babel-core:

npm install babel-plugin-transform-async-to-module-method babel-polyfill bluebird babel-preset-es2015 babel-core

2 - Adicione seu polyfill js babel:

import 'babel-polyfill';

3 - Adicione plugin no seu .babelrc:

{
    "presets": ["es2015"],
    "plugins": [
      ["transform-async-to-module-method", {
        "module": "bluebird",
        "method": "coroutine"
      }]
    ]
}

Fonte: http://babeljs.io/docs/plugins/transform-async-to-module-method/

Eu tinha uma configuração
com o webpack usando presets: ['es2015', 'stage-0']
e o mocha que estava executando testes compilados pelo webpack.

Para fazer meus async/awaittestes funcionarem, tudo que eu precisava fazer era adicionar a mocha --require babel-polyfillopção.

Eu recebo esse erro usando gulp com rollup quando tentei usar geradores ES6:

gulp.task('scripts', () => {
  return rollup({
    entry: './app/scripts/main.js',
    format: "iife",
    sourceMap: true,
    plugins: [babel({
      exclude: 'node_modules/**',
      "presets": [
        [
          "es2015-rollup"
        ]
      ],
      "plugins": [
        "external-helpers"
      ]
    }),
    includePaths({
      include: {},
      paths: ['./app/scripts'],
      external: [],
      extensions: ['.js']
    })]
  })

  .pipe(source('app.js'))
  .pipe(buffer())
  .pipe(sourcemaps.init({
    loadMaps: true
  }))
  .pipe(sourcemaps.write('.'))
  .pipe(gulp.dest('.tmp/scripts'))
  .pipe(reload({ stream: true }));
});

Posso considerar que a solução foi incluir babel-polyfillcomo componente do pavilhão:

bower install babel-polyfill --save

e adicione-o como dependência em index.html:

<script src="/bower_components/babel-polyfill/browser-polyfill.js"></script>

Para quem procura usar a babel-polyfillversão 7 ^, faça isso com webpackver3 ^.

Npm instala o módulo npm i -D @babel/polyfill

Então, no seu webpackarquivo no seu entryponto, faça isso

entry: ['@babel/polyfill', path.resolve(APP_DIR, 'App.js')],

Meu modelo de trabalho babel 7 para reagir com o tempo de execução do regenerador:

.babelrc

{
  "presets": [
    [
      "@babel/preset-env",
      {
        "targets": {
          "node": true,
        },
      },
    ],
    "@babel/preset-react",
  ],
  "plugins": [
    "@babel/plugin-syntax-class-properties",
    "@babel/plugin-proposal-class-properties"
  ]
}

package.json

...

"devDependencies": {
  "@babel/core": "^7.0.0-0",
  "@babel/plugin-proposal-class-properties": "^7.4.4",
  "@babel/plugin-syntax-class-properties": "^7.2.0",
  "@babel/polyfill": "^7.4.4",
  "@babel/preset-env": "^7.4.5",
  "@babel/preset-react": "^7.0.0",
  "babel-eslint": "^10.0.1",
...

main.js

import "@babel/polyfill";

....

Se você estiver criando um aplicativo, precisará apenas de @babel/preset-enve @babel/polyfill:

npm i -D @babel/preset-env
npm i @babel/polyfill

(Nota: você não precisa instalar os pacotes core-jse regenerator-runtimeporque ambos foram instalados pelo @ babel / polyfill)

Então em .babelrc:

{
  "presets": [
    [
      "@babel/preset-env",
      {
        "useBuiltIns": "entry"  // this is the key. use 'usage' for further codesize reduction, but it's still 'experimental'
      }
    ]
  ]
}

Agora defina seus ambientes de destino. Aqui, fazemos isso no .browserslistrcarquivo:

# Browsers that we support

>0.2%
not dead
not ie <= 11
not op_mini all

Finalmente, se você concordar useBuiltIns: "entry", coloque import @babel/polyfillno topo do seu arquivo de entrada. Caso contrário, você está pronto.

O uso desse método importará seletivamente esses polyfills e o arquivo 'regenerator-runtime' (corrigindo seu regeneratorRuntime is not definedproblema aqui) SOMENTE se eles forem necessários para qualquer um dos ambientes / navegadores de destino.

para referência futura :

A partir das predefinições de estágio Babel versão 7.0.0-beta.55 foram removidas

consulte o blog https://babeljs.io/blog/2018/07/27/removing-babels-stage-presets

A espera assíncrona ainda pode ser usada por

https://babeljs.io/docs/en/babel-plugin-transform-async-to-generator#usage

instalação

npm install --save-dev @babel/plugin-transform-async-to-generator

uso em .babelrc

 { 
     "presets": ["@babel/preset-env"],
     "plugins": ["@babel/plugin-transform-async-to-generator"]
 }

e usando babel polyfill https://babeljs.io/docs/en/babel-polyfill

instalação

npm install --save @babel/polyfill

webpack.config.js

module.exports = {
  entry: ["@babel/polyfill", "./app/js"],
};

Em 2019 Babel 7.4.0+, o babel-polyfillpacote foi descontinuado em favor de incluir diretamente core-js/stable( core-js@3+, para polifillar os recursos do ECMAScript) e regenerator-runtime/runtime(necessário para usar as funções do gerador de transpilado):

import "core-js/stable";
import "regenerator-runtime/runtime";

Informações da babel-polyfill documentação .

A maneira mais fácil de corrigir esse 'problema regeneratorRuntime não definido' no seu console:

Você não precisa instalar nenhum plug-in desnecessário. Basta adicionar:

<script src="https://unpkg.com/[email protected]/runtime.js"></script>

dentro do corpo em seu index.html. Agora regeneratorRuntime deve ser definido depois de executar o babel e agora suas funções async / waitit devem ser compiladas com êxito no ES2015

Se você estiver usando Gulp + Babel para um front-end, precisará usar o babel-polyfill

npm install babel-polyfill

e adicione uma tag de script ao index.html acima de todas as outras tags de script e faça referência a babel-polyfill de node_modules