Babel 6 regeneratorRuntime não está definido


634

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?


Você incluiu regenerador?
ssube

3
babel-polyfill é o que você precisa.
Ronnie Royston

babel-polyfill foi depreciado a partir de 7,4; esta atualização, portanto, a publicação descreve a migração.
JWCS

Para aqueles que usam versões mais recentes do babel e do nó: stackoverflow.com/a/62254909/8169904
segunda

Respostas:


682

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

77
Importante quando você estiver usando babel com Webpack: em vez de usar require("babel-polyfill")o que não está funcionando, você adicionar "babel-polyfill"em sua entryem config, assim: entry: ["babel-polyfill", "src/main.js"]. Isso funcionou para mim, incluindo o uso no webpack-dev-server com HMR.
Cemen

6
Eu estava tentando fazer meus testes mocha rodarem com babel6 e async e tive que adicionar --require babel-polyfill à configuração do executor de teste
npm

13
Para que serve o babel-register?
trusktr

6
@Lloyd devDependencyse você estiver usando o webpack, porque ele "compila" os arquivos antes de executar. dependencyse você não estiver usando o webpack e estiver exigindo o babel.
BrunoLM

4
Isso torna o tamanho do arquivo de saída enorme ... É melhor usar apenas o que você precisa, em vez de exigir o babel-polyfill diretamente.
Inanc Gumus

342

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 .


11
Eu não precisava babel-runtimeficar assíncrono enquanto aguardava o trabalho. Isso está correto? Edit: Estou executando o lado do servidor de código. :)
GijsjanB

8
Se você conseguiu usá-lo sem o babel-runtime, é porque já está na sua árvore de dependência. Portanto, esteja ciente de que, se você estiver escrevendo uma biblioteca, e o babel-runtime estiver chegando como uma dependência de desenvolvedor, ele pode não estar lá para seus usuários. Você precisará incluí-lo como uma dependência normal para distribuição.
Neverfox

23
babel-plugin-transform-runtimenecessário apenas . Funciona como um encanto.
Saike

9
Esta solução não está boa porque requer um trabalho extra no Browserify ou Webpack para expandir as requirechamadas adicionadas pelo transform-runtimeplug - in.
fineza

9
Observe que para Babel 7 você precisa executarnpm install --save-dev @babel/plugin-transform-runtime
Andrey Semakin

197

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"]
    ]
}

Como podemos fazê-lo sem .babelrc (apenas usando arquivo de configuração Webpack)
Pouya Jabbarisani

2
O documento mostra o uso como "plugins": ["@babel/plugin-transform-runtime"], e não "plugins": [ ["@babel/transform-runtime"] ]aqui. Nome de plug-in diferente. Ambos os trabalhos. Mas qual é o correto ..?
KYW

5
I se requerem não está definido quando seguindo este método
Batman

1
@kyw é melhor seguir sempre os documentos - não há outra diferença além da convenção.
Matt Shirley

4
A adição @babel/transform-runtimede plugins causou o erro "exportações não definidas" para mim. Eu mudei para isso para obter assíncrono para trabalhar em Babel7:["@babel/plugin-transform-runtime", { "regenerator": true } ]
Hari

105

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.


3
Isso realmente funciona. A única desvantagem é um monte de dependências, babel-preset-envmas acho que vale a pena. Ame o estilo declarativo também. Também yarn installé agorayarn add
Roman Usherenko

1
@gargantuan Sim, sim.
Tyler Longo

3
Não é realmente uma solução se você deseja direcionar navegadores mais antigos ou versões de nós.
Rohan Orton

2
Apenas no caso de não ser óbvio .... esta solução recomendada NÃO funcionará se você precisar que o seu código funcione no IE11 #
Maurice

7
Por que isso tem tantos votos positivos? Isso funciona apenas porque não se transforma mais em assíncrono / espera e, portanto, não precisa mais do regeneratorRuntime e, como não é transformado, não funcionará em navegadores que não o suportam.
Shikyo

47

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.


Esta parece ser a solução mais conveniente. No entanto, a maioria dos navegadores suporta geradores, portanto, essa solução provavelmente não é a ideal. Veja: blogs.candoerz.com/question/213492/…
Kitanotori

E se você não estiver usando o webpack?
Batman

38

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"
  ]
}

1
Está faltando "transformar-assíncrono em gerador" nos plug-ins. Eu tive que acrescentar que, assim como para fazê-lo funcionar
GabrielBB

@ GabrielBB Eu editei o post, por isso é um exemplo completo.
Webnoob

2
É loose: truenecessário?
Tom Söderlund

Ao usá-lo, ele adiciona requesito ao meu arquivo e requer indefinido no navegador.
Batman

loose: true NÃO é necessário. O que você realmente precisa no seu .babelrc é: {"presets": ["es2015", "react", "stage-2"], "plugins": ["transform-runtime", "transform-async-to-generator "]}
Efe Ariaroo

29

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


2
Essa é a resposta correta e mais atualizada e me ajudou com um problema no meu projeto atual. Obrigado!
Cdpautsch 23/07/19

2
{ "Presets": [[ "@ babel / preset-env", { "alvos": { "esmodules": true}}]]} Isso me ajudou para uma compilação node.js
Smolin Pavel

3
Quero dizer, eu já sabia disso, mas para ajudar os outros, essa deve ser a resposta correta. Cumprimentos!
Niewiadomski Paweł

Nota: Eu acho que faz sentido usar o encadeamento Babel 7 , para que os erros relacionados à versão possam ser melhor distinguidos. Você pode encontrar uma versão mais específica desta resposta aqui (mas as declarações acima ainda são verdadeiras)
ford04 em 30/04

16

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
]

Esta deve ser a resposta aceita, babel-polyfill acrescenta demais outras coisas
Shikyo

Trabalho perfeito para mim ... Muito obrigado
Leandro William

1
Esse método sempre inclui o tempo de execução. Eu acredito que derrota o propósito de @babel/preset-env's useBuiltInsde inserir dinamicamente em tempo de execução com base em seus navegadores de destino.
Kyw #

13

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"
        }
      }
    ]
  ]
}

2
por favor, explique sua resposta? o que "node": "current" faz
Vishal Solanki

Eu também gostaria de saber o que isso faz e se é uma solução recomendada - ou seja, não compromete nada e é "à prova de futuro" (o máximo que puder ser no momento). targetsparece referir-se esta : the environments you support/target for your project, enquanto targets.nodeé este : if you want to compile against the current node version, you can specify "node": true or "node": "current", which would be the same as "node": process.versions.node
user1063287

FWIW, usei o segundo bloco definido na resposta (e removido "stage-0"no processo) e o erro do regenerador desapareceu.
user1063287

1
@BunkerBoy Por conveniência, você pode usar "node": "current" para incluir apenas os polyfills e transformações necessárias para a versão do Node.js. que você usa para executar o Babel
Zero

então para isso eu não tenho que instalar polyfills?
Vishal Solanki

12

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.


5
a; kgjablrsdkjfjasnkljfbajklfdablkhjnfl; triste Eu estava perdendo minha cabeça e você me salvou Eu te amo
John R Perry

11

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


Não definir um valor para useBuiltInso padrão será false. Isso não importará automaticamente nenhum polyfills, dependendo do ambiente de destino, o que prejudica o objetivo "@babel/preset-env". Aqui também está um comentário relacionado de um dos desenvolvedores do babel.
bela53 2/01

10

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


9

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 .


3
É melhor usar predefinições em envvez de es2015. já envinclui es2015.
Neurotransmitter #

9

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.


9

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'],
};

O que sempre me surpreende é como os desenvolvedores são preguiçosos. Os desenvolvedores de Babel decidiram descontinuar a funcionalidade, eles podem esperar que isso se torne um problema. Por que não deixar as pessoas saberem qual era a intenção mais provável e o que deveriam fazer para consertá-la. Mas não, vamos apenas mostrar uma mensagem que é absolutamente inútil para iniciantes.
Pavel Voronin

Isso não funciona imgur.com/a/2Ea8WDk
improvável

Funcionou muito bem para mim. Meu projeto de não reação .babelrcé assim: `` `{" presets ": [" @ babel / preset-env "]," plugins ": [" @ babel / plugin-transform-runtime "]}` ``
Anthony

8

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 .


7

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"

6

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.


1
Por que ele usaria o webpack se é um serviço de back-end? Sua resposta implica que ele precisa usar o webpack?
Spock

1
@ Spock, eu pensei sobre isso. Eu estava enfrentando o mesmo problema e resolvi meu problema dessa maneira simples. Eu acho que é uma resposta positiva para o usuário do Webpack e o hare tem mais resposta certa para que você possa seguir qualquer outra pessoa.
MD Ashik

Por que você precisa pressionar o botão Vote !!!! Você pode dizer o motivo se você quiser me ajudar.
MD Ashik

6

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
      }]
    ]
  }


4

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/


3

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.


3

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>

Obrigado. Isso funcionou para mim. Eu não sabia que precisava adicionar a tag de script para que ela funcionasse no lado do cliente.
Raza

3

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')],

3

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";

....

2

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.


2

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"],
};

2

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 .


2

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/regenerator-runtime@0.13.1/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


1

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


Não vejo por que o voto negativo e o comentário. Eu queria isso para o navegador Firefox. Também tirei as informações diretamente do próprio site da babel. O comentário não me ajudou a resolver o problema quando o tentei.
Petros Kyriakou
Ao utilizar nosso site, você reconhece que leu e compreendeu nossa Política de Cookies e nossa Política de Privacidade.
Licensed under cc by-sa 3.0 with attribution required.