Como instalo a biblioteca babel-polyfill?

Comecei a usar o Babel para compilar meu código javascript ES6 no ES5. Quando começo a usar o Promises, parece que não está funcionando. O site da Babel declara suporte a promessas via polyfills.

Sem sorte, tentei acrescentar:

require("babel/polyfill");

ou

import * as p from "babel/polyfill";

Com isso, receberei o seguinte erro no bootstrap do aplicativo:

Não foi possível encontrar o módulo 'babel / polyfill'

Eu procurei pelo módulo, mas parece que estou perdendo alguma coisa fundamental aqui. Também tentei adicionar o NPM bluebird antigo e bom, mas parece que ele não está funcionando.

Como usar os polyfills da Babel?

Isso mudou um pouco no babel v6.

Dos documentos:

O polyfill emulará um ambiente completo do ES6. Esse polyfill é carregado automaticamente ao usar o nó babel.

Instalação:
$ npm install babel-polyfill

Uso no Node / Browserify / Webpack:
Para incluir o polyfill, você precisa solicitá-lo na parte superior do ponto de entrada do seu aplicativo.
require("babel-polyfill");

Uso no navegador:
disponível no dist/polyfill.jsarquivo em um babel-polyfillrelease npm. Isso precisa ser incluído antes de todo o seu código Babel compilado. Você pode anexá-lo ao seu código compilado ou incluí-lo em um <script>antes dele.

NOTA: Não faça requireisso via browserify etc, use babel-polyfill.

Os documentos de Babel descrevem isso de forma bastante concisa:

O Babel inclui um polyfill que inclui um tempo de execução do regenerador personalizado e core.js.

Isso emulará um ambiente completo do ES6. Esse polyfill é carregado automaticamente ao usar o babel-node e o babel / register.

Certifique-se de solicitá-lo no ponto de entrada do seu aplicativo antes que qualquer outra coisa seja chamada. Se você estiver usando uma ferramenta como o webpack, isso se torna bastante simples (você pode dizer ao webpack para incluí-lo no pacote).

Se você estiver usando uma ferramenta como gulp-babelou babel-loader, também precisará instalar o babelpróprio pacote para usar o polyfill.

Observe também que, para os módulos que afetam o escopo global (polyfills e similares), você pode usar uma importação concisa para evitar ter variáveis ​​não utilizadas em seu módulo:

import 'babel/polyfill';

Para o Babel versão 7, se você estiver usando @ babel / preset-env, para incluir o polyfill, basta adicionar um sinalizador 'useBuiltIns' com o valor de 'use' na sua configuração do babel. Não há necessidade de solicitar ou importar o polyfill no ponto de entrada do seu aplicativo.

Com esse sinalizador especificado, o babel @ 7 otimizará e incluirá apenas os polyfills necessários.

Para usar esse sinalizador, após a instalação:

npm install --save-dev  @babel/core @babel/cli @babel/preset-env
npm install --save @babel/polyfill

Basta adicionar a bandeira:

useBuiltIns: "usage" 

ao seu arquivo de configuração babel chamado "babel.config.js" (também novo no Babel @ 7), na seção "@ babel / env":

// file: babel.config.js

module.exports = () => {
   const presets = [
      [
         "@babel/env", 
         { 
             targets: { /* your targeted browser */ },
             useBuiltIns: "usage"  // <-----------------*** add this
         }
      ]
   ];

   return { presets };
};

Referência:

• use # polyfill
• babel-polyfill # uso no nó-browserify-webpack
• babel-preset-env # usebuiltins

Atualizar agosto de 2019:

Com o lançamento do Babel 7.4.0 (19 de março de 2019), o babel / polyfill foi descontinuado. Em vez de instalar o @ babe / polyfill, você instalará o core-js:

npm install --save core-js@3

Uma nova entrada corejsé adicionada ao seu babel.config.js

// file: babel.config.js

module.exports = () => {
   const presets = [
      [
         "@babel/env", 
         { 
             targets: { /* your targeted browser */ },
             useBuiltIns: "usage",
             corejs: 3  // <----- specify version of corejs used
         }
      ]
   ];

   return { presets };
};

veja o exemplo: https://github.com/ApolloTang/stackoverflow-eg--babel-v7.4.0-polyfill-w-core-v3

Referência:

• 7.4.0 Lançado: core-js 3, métodos privados estáticos e aplicação parcial
• core-js @ 3, babel e um olhar para o futuro

Se o seu package.json se parecer com o seguinte:

  ...
  "devDependencies": {
    "babel": "^6.5.2",
    "babel-eslint": "^6.0.4",
    "babel-polyfill": "^6.8.0",
    "babel-preset-es2015": "^6.6.0",
    "babelify": "^7.3.0",
  ...

E você recebe a Cannot find module 'babel/polyfill'mensagem de erro, provavelmente precisará alterar sua instrução de importação DE:

import "babel/polyfill";

PARA:

import "babel-polyfill";

E verifique se ele vem antes de qualquer outra importdeclaração (não necessariamente no ponto de entrada do seu aplicativo).

Referência: https://babeljs.io/docs/usage/polyfill/

Primeiro, a resposta óbvia que ninguém forneceu, você precisa instalar o Babel no seu aplicativo:

npm install babel --save

(ou babel-corese você preferir require('babel-core/polyfill')).

Além disso, tenho uma tarefa difícil de transpilar meu es6 e jsx como uma etapa de compilação (ou seja, eu não quero usar babel/register, e é por isso que estou tentando usar babel/polyfilldiretamente em primeiro lugar), então gostaria de coloque mais ênfase nesta parte da resposta da @ ssube:

Certifique-se de solicitá-lo no ponto de entrada do seu aplicativo, antes que qualquer outra coisa seja chamada

Encontrei um problema estranho em que estava tentando solicitar babel/polyfillalgum arquivo de inicialização do ambiente compartilhado e recebi o erro que o usuário referenciou - acho que pode ter algo a ver com a forma como o babel ordena a importação versus requer, mas não consigo reproduzir agora. De qualquer forma, mover import 'babel/polyfill'como a primeira linha nos scripts de inicialização do meu cliente e servidor corrigiu o problema.

Observe que, se você preferir usar require('babel/polyfill'), garantiria que todas as outras instruções do carregador de módulos também sejam necessárias e não usem importações - evite misturar as duas. Em outras palavras, se você tiver alguma declaração de importação no script de inicialização, faça import babel/polyfilla primeira linha do script em vez de require('babel/polyfill').

O babel-polyfill permite que você use o conjunto completo de recursos do ES6 além das alterações de sintaxe. Isso inclui recursos como novos objetos internos, como Promises e WeakMap, além de novos métodos estáticos, como Array.from ou Object.assign.

Sem o babel-polyfill, o babel apenas permite o uso de recursos como funções de seta, destruição, argumentos padrão e outros recursos específicos de sintaxe introduzidos no ES6.

https://www.quora.com/What-does-babel-polyfill-do

https://hackernoon.com/polyfills-everything-you-ever-wanted-to-know-or-maybe-a-bitbitless-7c8de164e423

Como Babel diz nos documentos , para Babel> 7.4.0 o módulo @ babel / polyfill está obsoleto , por isso é recomendável usar diretamente as bibliotecas core-js e regenerator-runtime que antes eram incluídas no @ babel / polyfill.

Então, isso funcionou para mim:

npm install --save core-js@3.6.5
npm install regenerator-runtime

adicione no topo do seu arquivo js inicial:

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