javascript - online - ¿Cómo instalo la biblioteca babel-polyfill?
implement babeljs (6)
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
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?
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'')
.
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
.
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'';
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:
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:
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/