¿Cómo instalo la biblioteca babel-polyfill?

Acabo de comenzar a usar Babel para compilar mi código JavaScript ES6 en ES5. Cuando empiezo a usar Promesas parece que no está funcionando. El sitio web de Babel indica el apoyo a las promesas a través de polyfills.

Sin suerte, intenté agregar:

require("babel/polyfill");

o

import * as p from "babel/polyfill";

Con eso obtendré el siguiente error en el arranque de mi aplicación:

No se puede encontrar el módulo 'babel / polyfill'

Busqué el módulo pero parece que me falta algo fundamental aquí. También traté de agregar el antiguo y bueno bluebird NPM, pero parece que no funciona.

¿Cómo usar los polyfills de Babel?

Esto cambió un poco en babel v6.

De los documentos:

El polyfill emulará un entorno ES6 completo. Este polyfill se carga automáticamente cuando se usa babel-node.

Instalación:
$ npm install babel-polyfill

Uso en Node / Browserify / Webpack:
para incluir el polyfill, debe solicitarlo en la parte superior del punto de entrada a su aplicación.
require("babel-polyfill");

Uso en el navegador:
disponible desde el dist/polyfill.jsarchivo dentro de una babel-polyfillversión npm. Esto debe incluirse antes de todo el código compilado de Babel. Puede anteponerlo a su código compilado o incluirlo en un <script>antes.

NOTA: No haga requireesto a través de browserify, etc., use babel-polyfill.

Los documentos de Babel describen esto de manera muy concisa:

Babel incluye un polyfill que incluye un tiempo de ejecución de regenerador personalizado y core.js.

Esto emulará un entorno ES6 completo. Este polyfill se carga automáticamente cuando se usa babel-node y babel / register.

Asegúrese de requerirlo en el punto de entrada de su aplicación, antes de llamar a cualquier otra cosa. Si está utilizando una herramienta como webpack, eso se vuelve bastante simple (puede decirle a webpack que lo incluya en el paquete).

Si está utilizando una herramienta como gulp-babelo babel-loader, también necesita instalar el babelpaquete para usar el polyfill.

También tenga en cuenta que para los módulos que afectan el alcance global (polyfills y similares), puede usar una importación concisa para evitar tener variables no utilizadas en su módulo:

import 'babel/polyfill';

Para la versión 7 de Babel, si está utilizando @ babel / preset-env, para incluir polyfill todo lo que tiene que hacer es agregar un indicador 'useBuiltIns' con el valor de 'uso' en su configuración de babel. No es necesario exigir ni importar polyfill en el punto de entrada de su aplicación.

Con esta bandera especificada, babel @ 7 optimizará y solo incluirá los polyfills que necesita.

Para usar esta bandera, después de la instalación:

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

Simplemente agregue la bandera:

useBuiltIns: "usage" 

a su archivo de configuración de babel llamado "babel.config.js" (también nuevo en Babel @ 7), en la sección "@ babel / env":

// file: babel.config.js

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

   return { presets };
};

Referencia:

• uso # polyfill
• babel-polyfill # uso-en-nodo-browserify-webpack
• babel-preset-env # usebuiltins

Actualización de agosto de 2019:

Con el lanzamiento de Babel 7.4.0 (19 de marzo de 2019) @ babel / polyfill está en desuso. En lugar de instalar @ babe / polyfill, instalará core-js:

npm install --save core-js@3

Se corejsagrega una nueva entrada a su 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 };
};

ver ejemplo: https://github.com/ApolloTang/stackoverflow-eg--babel-v7.4.0-polyfill-w-core-v3

Referencia:

• 7.4.0 Lanzado: core-js 3, métodos privados estáticos y aplicación parcial
• core-js @ 3, babel y una mirada al futuro

Si su package.json se parece a lo siguiente:

  ...
  "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",
  ...

Y recibe el Cannot find module 'babel/polyfill'mensaje de error, entonces probablemente solo necesite cambiar su declaración de importación DE:

import "babel/polyfill";

A:

import "babel-polyfill";

Y asegúrese de que aparezca antes de cualquier otra importdeclaración (no necesariamente en el punto de entrada de su solicitud).

Referencia: https://babeljs.io/docs/usage/polyfill/

En primer lugar, la respuesta obvia que nadie ha proporcionado, debe instalar Babel en su aplicación:

npm install babel --save

(o babel-coresi en cambio quieresrequire('babel-core/polyfill') ).

Aparte de eso, tengo una tarea difícil para recopilar mi es6 y jsx como un paso de compilación (es decir, no quiero usar babel/register, por eso estoy tratando de usar babel/polyfilldirectamente en primer lugar), así que me gustaría Pon más énfasis en esta parte de la respuesta de @ssube:

Asegúrese de requerirlo en el punto de entrada de su aplicación, antes de llamar a cualquier otra cosa

Me encontré con un problema extraño en el que estaba tratando de babel/polyfillsolicitar un archivo de inicio de entorno compartido y recibí el error al que hizo referencia el usuario: creo que podría haber tenido algo que ver con la forma en que Babel ordena la importación versus la que requiere, pero no puedo reproducir ahora. De todos modos, moverme import 'babel/polyfill'como la primera línea en los scripts de inicio de mi cliente y servidor solucionó el problema.

Tenga en cuenta que si en su lugar desea usar, require('babel/polyfill')me aseguraría de que todas las demás declaraciones del cargador de módulos también sean necesarias y no utilicen importaciones; evite mezclar las dos. En otras palabras, si tiene alguna declaración de importación en su script de inicio, haga import babel/polyfillla primera línea en su script en lugar de require('babel/polyfill').

babel-polyfill le permite usar el conjunto completo de funciones de ES6 más allá de los cambios de sintaxis. Esto incluye características como nuevos objetos integrados como Promises y WeakMap, así como nuevos métodos estáticos como Array.from u Object.assign.

Sin babel-polyfill, babel solo le permite usar características como funciones de flecha, desestructuración, argumentos predeterminados y otras características específicas de sintaxis introducidas en ES6.

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

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

Como dice Babel en el documentos , para Babel> 7.4.0 el módulo @ babel / polyfill está en desuso , por lo que se recomienda utilizar directamente las bibliotecas core-js y regenerator-runtime que antes se incluían en @ babel / polyfill.

Entonces esto funcionó para mí:

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

luego agregue a la parte superior de su archivo js inicial:

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