it-swarm-pt.tech

Regenerador Babel 6O tempo de execução não está definido

Eu estou tentando usar async, aguarde a partir do zero no Babel 6, mas estou ficando regeneradorRuntime 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/await funciona muito bem. Alguma idéia do que estou fazendo de errado?

463
BrunoLM

babel-polyfill é obrigatório. Você também deve instalá-lo para obter async/waitait trabalhando.

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/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á usando webpack você precisa colocá-lo como a primeira entrada como por @Cemen comentar:

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
552
BrunoLM

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

Externalize as referências para auxiliares e builtins, automaticamente polyfilling seu código sem poluentes globais. O que isso realmente significa? Basicamente, você pode usar built-ins como Promise, Set, Symbol, etc, bem como usar todos os recursos do Babel que requerem um polyfill de forma contínua, sem poluição global, tornando-o extremamente adequado para bibliotecas.

Também inclui suporte para async/wait junto 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", {
      "polyfill": false,
      "regenerator": true
    }]
  ]
}
259
johnny

Atualizar

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

Portanto, esta resposta é NÃO bastante apropriada para a questão original. Vou mantê-lo aqui como referência para babel-preset-env.

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

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

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

Acredito que encontrei as práticas recomendadas 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 do babel:

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

Então, seu aplicativo deve estar disponível nas duas últimas versões do navegador Google Chrome.

Você também pode definir Node como destinos 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 da filosofia do babel-preset-env: me diga qual ambiente você quer suportar, NÃO me diga como apoiá-lo. É a beleza da programação declarativa.

Eu testei asyncawait e 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-env, isso me liberta do inferno da configuração de Babel.

88
Tyler Long

Alternativamente, se você não precisa de todos os módulos babel-polyfill, você pode especificar babel-regenerator-runtime na configuração do seu webpack:

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

  // ...
};

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

43
Antony Mativos

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"
  ]
}
36
E. Fortes

Usuários de Babel 7

Eu tive alguns problemas em resolver isso, já que a maioria das informações era de 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"]
    ]
}
34
Matt Shirley

babel-regenerator-runtime é agora depreciado , em vez disso, deve-se usar regenerator-runtime.

Para usar o gerador de tempo de execução com webpack e babel v7:

instale regenerator-runtime

npm i -D regenerator-runtime

Em seguida, adicione a configuração do Webpack: 

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

Tenha cuidado com as funções içadas

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

Altere este código

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

para isso

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

para evitar que ele seja içado acima da importação de polyfill.

11
Ally

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

No meu caso, esse erro foi lançado por testes Mocha.

A seguir corrigiu o problema

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

9
Zubair Alam

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

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

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

    ... 
     
     entrada: ['babel-polyfill', './index.js'], 
     
     ...
  2. Eu precisava atualizar meu .babelrc para permitir a complicação do async/await em geradores:

    {
     "presets": ["es2015"], 
     "plugins": ["transformar-async-para-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-transformar-async-para-gerador, 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"
 }

Gist Código Completo:

Eu tenho o código de um GitHub Gist realmente útil e conciso que você pode encontrar aqui .

9
Joshua Dyck

Você está recebendo um erro porque os geradores async/await usam, que são um recurso ES2016, não o ES2015. Uma maneira de corrigir isso é instalar o preset do babel para o ES2016 (npm install --save babel-preset-es2016) e compilar para o ES2016 em vez do ES2015:

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

Como as outras respostas mencionam, você também pode usar polyfills (embora tenha certeza que você carrega o polyfill primeiro antes de qualquer outro código ser executado). Alternativamente, se você não quiser incluir todas as dependências de polyfill, você pode usar o babel-regenerator-runtime ou o babel-plugin-transform-runtime .

7
Galen Long

Atualize seu arquivo .babelrc de acordo com os exemplos a seguir, ele funcionará.

Se você estiver usando o pacote @babel/preset-env

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

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

Nova resposta Por que você segue minha resposta?

Ans: Porque eu vou te dar uma resposta com o último projeto da versão Update npm. 

04/14/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 o seu Use esta versão ou mais versão UP do NPM e todos os outros ... Então, só precisa mudar: 

webpack.config.js

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

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

import "babel-polyfill";

Agora verifique tudo está bem. Referência LINK

Também obrigado @BrunoLM por sua resposta agradável.

6
MD Ashik

Eu consertei esse erro instalando o babel-polyfill

npm install babel-polyfill --save

então eu 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 testes eu incluí --requerire 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"
6
Ayobami

Para usuários do babel7 e usuários do ParcelJS> = 1.10.0

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

.babelrc

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

tirado de https://github.com/parcel-bundler/parcel/issues/1762

5
Petros Kyriakou

Os navegadores de destino que eu preciso para suportar já suportam async/wait, mas quando escrevo testes de mocha, sem a configuração correta, eu ainda recebo esse erro. 

A maioria dos artigos que eu pesquisei estão desatualizados, incluindo a resposta aceita e as respostas mais votadas aqui, ou seja, você não precisa de polyfill, babel-regenerator-runtime, babel-plugin-transform-runtime. etc se o seu navegador de destino (s) já suporta async/aguardar (claro, se você não precisa polyfill)

Eu não quero usar webpack também. 

A resposta de Tyler Long está realmente no caminho certo, já que ele sugeriu babel-preset-env (mas eu omiti isso primeiro como ele mencionou polifill no começo). Eu ainda tenho o ReferenceError: regeneratorRuntime is not defined no primeiro, então eu percebi que era porque eu não defini o alvo. Depois de definir o alvo 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
      }]
    ]
  }
5
Qiulang

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

npm install --save-dev regenerator-runtime

Então no meu código:

import 'regenerator-runtime/runtime';

Feliz por evitar o extra de 200 kB de babel-polyfill.

4
Tom Söderlund

1 - Instale o babel-plugin-transform-async-para-módulo-método, 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 no seu js babel polyfill:

import 'babel-polyfill';

3 - Adicione o plugin em 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/

4
Luisangonzalez

Para pessoas que querem usar o babel-polyfill version 7 ^ faça isso com webpack ver3 ^.

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

Então, no seu arquivo webpack no seu ponto entry, faça isso

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

Eu recebo este 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 }));
});

Em todo caso, a solução foi incluir babel-polyfill como componente do bower:

bower install babel-polyfill --save

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

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

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

Para fazer com que meu async/await nos testes funcione, tudo o que preciso fazer é adicionar a opção mocha --require babel-polyfill.

2
lakesare

A maioria dessas respostas recomenda soluções para lidar com esse erro usando o WebPack. Mas no caso de alguém estar usando o RollUp (como eu sou), aqui está o que finalmente funcionou para mim (apenas um heads-up e agrupando esses anúncios de polyfill sobre 10k até o tamanho da saída):

.babelrc

{
    "presets": [
        [
            "env",
            {
                "modules": false,
                "targets": {
                    "browsers": ["last 2 versions"]
                }
            }
        ]
    ],
    "plugins": ["external-helpers",
        [
            "transform-runtime",
            {
                "polyfill": false,
                "regenerator": true
            }
        ]]
}

rollup.config.js

import resolve from 'rollup-plugin-node-resolve';
import babel from 'rollup-plugin-babel';
import uglify from 'rollup-plugin-uglify';
import commonjs from 'rollup-plugin-commonjs';


export default {
    input: 'src/entry.js',
    output: {
        file: 'dist/bundle.js',
        format: 'umd',
        name: 'MyCoolLib',
        exports: 'named'
    },
    sourcemap: true,
    plugins: [
        commonjs({
            // polyfill async/await
            'node_modules/babel-runtime/helpers/asyncToGenerator.js': ['default']
        }),
        resolve(),
        babel({
            runtimeHelpers: true,
            exclude: 'node_modules/**', // only transpile our source code
        }),
        uglify()

    ]
};
1
Maurice

Se você estiver usando o Gulp + Babel para um frontend, você precisa usar o babel-polyfill

npm install babel-polyfill 

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

1
Petros Kyriakou

eu tive regeneratorRuntime não é definido erro quando eu usei 'async' e 'await' no meu aplicativo reagir 'async' e 'await' é uma nova palavras-chave em ES7 para isso você deve usar o babel-preset-es2017 instalar este devDependencies:

`

"babel-preset-es2017": "^6.24.1",
"babel-preset-react": "^6.24.1",
"babel-preset-stage-0": "^6.24.1", `

e usar isso 

"presets": [ "es2017" , "stage-0" , "react" ]

0
Anas Alpure

Eu estava encontrando esse problema ao tentar executar o Mocha + Babel. Eu tinha um .babelrc que funcionava no desenvolvimento (veja as outras respostas aqui, elas são bem completas), mas meu comando npm run test ainda estava reclamando sobre regeneratorRuntime is not defined. Então eu modifiquei meu package.json:

"scripts": {
  "test": "mocha --require babel-polyfill --require babel-core/register tests/*.js"
}

Leia mais: https://babeljs.io/en/setup/#mocha-4

0
helsont

Eu tenho assíncrono esperando trabalhar com webpack/babel build:

"devDependencies": {
    "babel-preset-stage-3": "^6.11.0"
}

.babelrc:

"presets": ["es2015", "stage-3"]
0
msmfsd

Se você está criando um aplicativo, basta usar o @babel/preset-env e @babel/polyfill:

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

(Nota: você não precisa instalar os pacotes core-js e regenerator-runtime porque 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, nós fazemos isso no arquivo .browserslistrc:

# Browsers that we support

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

Finalmente, se você foi com useBuiltIns: "entry", coloque import @babel/polyfill no topo do seu arquivo de entrada. Caso contrário, você está feito.

O uso desse método importará seletivamente esses polyfills e o arquivo 'regenerator-runtime' (corrigindo sua questão regeneratorRuntime is not defined aqui)ONLYse eles forem necessários para qualquer um dos seus ambientes/navegadores de destino.

0
kyw

Em um cenário em que um arquivo babelHelpers.js personalizado é criado usando babel.buildExternalHelpers() com babel-plugin-external-helpsers, percebi que a solução menos custosa para o cliente é prefixar o regenerator-runtime/runtime.js na saída, em vez de em todos os polyfills.

// runtime.js
npm install --save regenerator-runtime

// building the custom babelHelper.js
fs.writeFile(
    './babelHelpers.js',
    fs.readFileSync('node_modules/regenerator-runtime/runtime.js')
    + '\n'
    + require('babel-core').buildExternalHelpers()
)

Essa solução chega a cerca de 20 KB em vez de ~ 230 KB ao incluir babel-polyfill.

0
RienNeVaPlu͢s