javascript - online - ¿Cómo instalo la biblioteca babel-polyfill?

implement babeljs

Question

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?

Answer 1

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

Answer 2

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

npm install babel --save

(o babel-core si en su lugar desea require(''babel-core/polyfill'') ).

Aparte de eso, tengo una tarea difícil para transpilar mi es6 y jsx como un paso de compilación (es decir, no quiero usar babel/register , por eso estoy tratando de usar babel/polyfill directamente en primer lugar), así que me gustaría poner 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 requerir babel/polyfill de algún 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 las importaciones versus las que requiere, pero estoy incapaz de reproducirse ahora. De todos modos, mover la 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 utilizar require(''babel/polyfill'') me aseguraría de que todas las demás declaraciones del cargador de módulos también sean require 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 que import babel/polyfill la primera línea de su script en lugar de require(''babel/polyfill'') .

Answer 3

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 Nodo / 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 archivo dist/polyfill.js dentro de una versión babel-polyfill npm. Esto debe incluirse antes de todo el código Babel compilado. Puede anteponerlo a su código compilado o incluirlo en un <script> antes de él.

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

Answer 4

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-babel o babel-loader , también necesita instalar el paquete babel 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'';

Answer 5

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:

• usage#polyfill
• babel-polyfill#usage-in-node-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 corejs una nueva entrada corejs 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/-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

Answer 6

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 obtiene el mensaje de error Cannot find module ''babel/polyfill'' , 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 declaración de import (no necesariamente en el punto de entrada de su aplicación).

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