Saltar al contenido principal

@babel/polyfill

Traducción Beta No Oficial

Esta página fue traducida por PageTurner AI (beta). No está respaldada oficialmente por el proyecto. ¿Encontraste un error? Reportar problema →

peligro

🚨 A partir de Babel 7.4.0, este paquete ha quedado obsoleto en favor de incluir directamente core-js/stable (para aplicar polyfill de características ECMAScript):

JavaScript
import "core-js/stable";

Si estás compilando generadores o funciones asíncronas a ES5, y usas una versión de @babel/core o @babel/plugin-transform-regenerator anterior a 7.18.0, también debes cargar el paquete regenerator runtime. Se carga automáticamente al usar la opción useBuiltIns: "usage" de @babel/preset-env o @babel/plugin-transform-runtime.

Babel incluye un polyfill que contiene un regenerator runtime personalizado y core-js.

Esto emulará un entorno completo ES2015+ (sin propuestas < Etapa 4) y está diseñado para usarse en aplicaciones, no en bibliotecas/herramientas. (este polyfill se carga automáticamente al usar babel-node).

Esto significa que puedes usar nuevas funciones incorporadas como Promise o WeakMap, métodos estáticos como Array.from u Object.assign, métodos de instancia como Array.prototype.includes y funciones generadoras (si usas el plugin regenerator). El polyfill modifica el ámbito global y prototipos nativos como String para lograr esto.

Instalación​

npm install --save @babel/polyfill
información

Al tratarse de un polyfill (que se ejecuta antes de tu código fuente), debe ser una dependency, no una devDependency.

Tamaño​

El polyfill se proporciona por conveniencia, pero deberías usarlo con @babel/preset-env y la opción useBuiltIns para evitar incluir todo el polyfill cuando no es necesario. De lo contrario, recomendamos importar manualmente polyfills individuales.

Propuestas TC39​

Si necesitas usar una propuesta que no sea Etapa 4, @babel/polyfill no la importará automáticamente. Deberás importarla individualmente desde otro polyfill como core-js. Pronto podríamos incluirlas como archivos separados en @babel/polyfill.

Uso en Node / Browserify / Webpack​

Para incluir el polyfill, debes requerirlo al inicio del punto de entrada de tu aplicación.

¡Asegúrate de que se llame antes que cualquier otro código o declaración require!

JavaScript
require("@babel/polyfill");

Si usas sintaxis import de ES6 en el punto de entrada de tu aplicación, debes importar el polyfill al inicio del punto de entrada para garantizar que los polyfills se carguen primero:

JavaScript
import "@babel/polyfill";

Con webpack, existen varias formas de incluir los polyfills:

  • Al usarse junto con @babel/preset-env:

    • Si se especifica useBuiltIns: 'usage' en .babelrc, no incluyas @babel/polyfill ni en el array entry de webpack.config.js ni en el código fuente. Nota: @babel/polyfill aún debe instalarse.

    • Si se especifica useBuiltIns: 'entry' en .babelrc, incluye @babel/polyfill al inicio del punto de entrada de tu aplicación mediante require o import como se mencionó anteriormente.

    • Si la clave useBuiltIns no se especifica o se establece explícitamente como useBuiltIns: false en tu .babelrc, agrega @babel/polyfill directamente al array entry en tu webpack.config.js.

webpack.config.js
module.exports = {
  entry: ["@babel/polyfill", "./app/js"],
};
  • Si no se utiliza @babel/preset-env, añade @babel/polyfill al array de entrada de webpack como se mencionó anteriormente. También puede agregarse al inicio del punto de entrada de la aplicación mediante import o require, aunque esto no es recomendable.
precaución

No recomendamos importar el polyfill completo directamente: utiliza las opciones de useBuiltIns o importa manualmente solo los polyfills específicos que necesites (ya sea de este paquete u otra fuente).

Uso en el navegador​

Disponible en el archivo dist/polyfill.js dentro de la versión npm de @babel/polyfill. Debe incluirse antes de todo tu código compilado con Babel. Puedes anteponerlo a tu código compilado o incluirlo en un <script> previo.

NOTA: No hagas require de esto mediante browserify u otras herramientas, usa @babel/polyfill directamente.

Detalles​

consejo

Si buscas una solución que no modifique variables globales para usar en herramientas/librerías, revisa el plugin transform-runtime. Ten en cuenta que esto significa que no podrás usar métodos de instancia como Array.prototype.includes.

Nota: Dependiendo de qué métodos ES2015 utilices realmente, podrías no necesitar @babel/polyfill ni el plugin runtime. Considera cargar solo los polyfills específicos que uses (como Object.assign) o simplemente documentar que el entorno donde se carga la librería debe incluir ciertos polyfills.