Estoy trabajando en un proyecto web que usa Babel 7 con Webpack 4. Nunca antes había usado Babel y realmente no puedo entender algunas partes. Según la documentación , estoy usando @babel/preset-env porque parece la forma recomendada (especialmente para principiantes). También uso la integración de Browserslist a través de mi archivo .browserslistrc .
Webpack hace bien la compilación ( babel-loader versión 8.0.2 ), no tengo errores, pero estoy confundido acerca de esta useBuiltIns: "entry" mencionada aquí y cómo funciona el sistema polyfill en Babel.
.babelrc.js
module.exports = { presets: [ ['@babel/preset-env', { "useBuiltIns": "entry" // do I need this? }] ], plugins: [ '@babel/plugin-syntax-dynamic-import' ] }; .browserslistrc
Copiado de aquí (considerado razonable porque mi proyecto usa Bootstrap).
>= 1% last 1 major version not dead Chrome >= 45 Firefox >= 38 Edge >= 12 Explorer >= 10 iOS >= 9 Safari >= 9 Android >= 4.4 Opera >= 30Entonces mis preguntas son:
1) ¿Necesito usar esa useBuiltIns: "entry" ?
2) ¿Necesito instalar el paquete @babel/polyfill e iniciar mi vendors.js con require("@babel/polyfill"); ?
3) ¿Qué pasa si omito ambos?
Si hago 1 y 2, mi vendors.js crece hasta 411 KB
Si omito ambos, son solo 341 KB
después de una compilación de producción.
Pensé que @babel/preset-env maneja todas las reescrituras y polirrellenos de forma predeterminada sin necesidad de import/require extra de mi parte...
¡Gracias!
-- EDITAR --
El equipo de Babel acaba de actualizar los documentos de @babel/polyfill en función de algunos problemas de GitHub (incluido el mío) quejándose de documentación poco clara o engañosa. Ahora es obvio cómo usarlo. (... y después de eso, mi pregunta original parece estúpida :)
1) ¿Necesito usar esa opción useBuiltIns: "entrada"?
Sí, si desea incluir polyfills en función de su entorno de destino.
TL;DR
Básicamente, hay 3 opciones para useBuiltIns :
"entrada" : al usar esta opción, @babel/preset-env reemplaza las importaciones directas de core-js por importaciones de solo los módulos específicos necesarios para un entorno de destino.
Eso significa que necesita agregar
import "core-js/stable"; import "regenerator-runtime/runtime"; a su punto de entrada y estas líneas serán reemplazadas solo por los polyfills requeridos. Al apuntar a Chrome 72, @babel/preset-env lo transformará en
import "core-js/modules/es.array.unscopables.flat"; import "core-js/modules/es.array.unscopables.flat-map"; import "core-js/modules/es.object.from-entries"; import "core-js/modules/web.immediate";"uso" : en este caso, los rellenos polifónicos se agregarán automáticamente cuando el uso de alguna característica no sea compatible en el entorno de destino. Asi que:
const set = new Set([1, 2, 3]); [1, 2, 3].includes(2); en navegadores como ie11 será reemplazado por
import "core-js/modules/es.array.includes"; import "core-js/modules/es.array.iterator"; import "core-js/modules/es.object.to-string"; import "core-js/modules/es.set"; const set = new Set([1, 2, 3]); [1, 2, 3].includes(2);En caso de que el navegador de destino sea la última versión de Chrome, no se aplicarán transformaciones.
Personalmente, esa es mi arma elegida, ya que no es necesario incluir nada (core-js o regenerador) en el código fuente, ya que solo los polyfills requeridos se agregarán automáticamente según el entorno de destino establecido en la lista del navegador.
false : ese es el valor predeterminado cuando no se agregan polyfills automáticamente.
2) ¿Necesito instalar el paquete @babel/polyfill e iniciar mi vendors.js con require("@babel/polyfill"); ?
Sí para entornos anteriores a babel v7.4 y core-js v3 .
TL;DR
No. A partir de babel v7.4 y core-js v3 (que se utiliza para el relleno múltiple bajo el capó), @babel/preset-env agregará los rellenos múltiples solo cuando sepa cuál de ellos requiere y en el orden recomendado.
Además @babel/polyfill se considera obsoleto a favor de inclusiones separadas de core-js y regenerator-runtime .
Por lo tanto, el uso de useBuiltIns con opciones que no sean falsas debería resolver el problema.
No olvide agregar core-js como una dependencia a su proyecto y establecer su versión en @babel/preset-env bajo la propiedad corejs .
3) ¿Qué pasa si omito ambos?
Como @PlayMa256 ya respondió, no habrá polyfills.
Se puede encontrar información más detallada y completa en la página del creador de core-js
También siéntase libre de jugar con babel sandbox
1) ¿Necesito usar esa opción useBuiltIns: "entrada"?
Sí, según babel docs:
"Esta opción habilita un nuevo complemento que reemplaza la instrucción import "@babel/polyfill" o require("@babel/polyfill") con requisitos individuales para @babel/polyfill según el entorno" - Básicamente, incluye todos los polyfills necesarios (cuando tenga @babel/polyfill instalado cuando sea necesario).
2) ¿Necesito instalar el paquete @babel/polyfill e iniciar mi vendors.js con require("@babel/polyfill"); ?
Necesitas instalar @babel/polyfill , no viene por defecto en babel. Debe incluir eso en su punto de entrada o agregar una importación en la parte superior de su punto de entrada.
3) ¿Qué pasa si omito ambos?
No tendrás polyfills.