Crear sitios web que funcionen bien en todos los navegadores principales es un principio fundamental de un ecosistema web abierto. Sin embargo, esto implica trabajo adicional para garantizar que todo el código que escribas sea compatible con cada navegador al que planeas dirigirte. Si deseas usar nuevas funciones del lenguaje JavaScript, debes transpilar estas funciones a formatos retrocompatibles para los navegadores que no las admiten.
Babel es la herramienta más utilizada para compilar código que contiene sintaxis más nueva en código que diferentes navegadores y entornos (como Node) pueden comprender. En esta guía, se da por sentado que usas Babel, por lo que debes seguir las instrucciones de configuración para incluirlo en tu aplicación si aún no lo hiciste. Selecciona webpack en Build Systems si usas webpack como el agrupador de módulos en tu app.
Para usar Babel y transpilar solo lo que necesitan tus usuarios, debes hacer lo siguiente:
- Identifica los navegadores para los que deseas segmentar tus anuncios.
- Usa
@babel/preset-envcon los destinos de navegador adecuados. - Usa
<script type="module">para dejar de enviar código transpilado a los navegadores que no lo necesitan.
Identifica los navegadores para los que deseas segmentar tus anuncios
Antes de comenzar a modificar la forma en que se transpila el código de tu aplicación, debes identificar qué navegadores acceden a ella. Analiza qué navegadores usan tus usuarios y a cuáles planeas segmentar tus anuncios para tomar una decisión fundamentada.
Usa @babel/preset-env
Por lo general, la transpilación de código genera un archivo con un tamaño mayor que el de su forma original. Si minimizas la cantidad de compilación que realizas, puedes reducir el tamaño de tus paquetes para mejorar el rendimiento de una página web.
En lugar de incluir complementos específicos para compilar de forma selectiva ciertas funciones del lenguaje que usas, Babel proporciona varios ajustes predeterminados que agrupan complementos. Usa @babel/preset-env para incluir solo las transformaciones y los polyfills necesarios para los navegadores a los que planeas segmentar tu contenido.
Incluye @babel/preset-env dentro del array presets en tu archivo de configuraciones de Babel, .babelrc:
{
"presets": [
[
"@babel/preset-env",
{
"targets": ">0.25%"
}
]
]
}
Usa el campo targets para especificar qué versiones del navegador deseas incluir. Para ello, agrega una consulta adecuada al campo browsers. @babel/preset-env se integra con Browserslist, una configuración de código abierto que comparten diferentes herramientas para segmentar navegadores. En la documentación de browserslist, se incluye una lista completa de las consultas compatibles.
Otra opción es usar un archivo .browserslistrc para enumerar los entornos a los que deseas segmentar tu aplicación.
El valor ">0.25%" le indica a Babel que solo incluya las transformaciones necesarias para admitir los navegadores que representan más del 0.25% del uso global. Esto garantiza que tu paquete no contenga código transpilado innecesario para los navegadores que usa un porcentaje muy pequeño de usuarios.
En la mayoría de los casos, este es un mejor enfoque que usar la siguiente configuración:
"targets": "last 2 versions"
El valor "last 2 versions" transcompila tu código para las dos últimas versiones de cada navegador, lo que significa que se proporciona compatibilidad para navegadores discontinuados, como Internet Explorer.
Esto puede aumentar innecesariamente el tamaño de tu paquete si no esperas que se usen estos navegadores para acceder a tu aplicación.
En última instancia, debes seleccionar la combinación adecuada de consultas para segmentar solo los navegadores que se ajusten a tus necesidades.
Habilita las correcciones de errores modernas
@babel/preset-env agrupa varias funciones de sintaxis de JavaScript en colecciones, las habilita y las inhabilita según los navegadores objetivo especificados. Si bien esto funciona bien, se transforma toda una colección de funciones de sintaxis cuando un navegador objetivo contiene un error con una sola función.
Esto suele generar más código transformado del necesario.
Desarrollada originalmente como un ajuste predeterminado independiente, la opción bugfixes en @babel/preset-env resuelve este problema convirtiendo la sintaxis moderna que no funciona en algunos navegadores a la sintaxis equivalente más cercana que sí funciona en esos navegadores. El resultado es un código moderno casi idéntico con algunos pequeños ajustes de sintaxis que garantizan la compatibilidad en todos los navegadores objetivo. Para usar esta optimización, asegúrate de tener instalada la versión 7.10 o posterior de @babel/preset-env y, luego, establece la propiedad bugfixes en true:
{
"presets": [
[
"@babel/preset-env",
{
"bugfixes": true
}
]
]
}
En Babel 8, la opción bugfixes estará habilitada de forma predeterminada.
Usa <script type="module">
Los módulos de JavaScript, o módulos ES, son una función relativamente nueva que se admite en todos los navegadores principales. Puedes usar módulos para crear secuencias de comandos que puedan importar y exportar desde otros módulos, pero también puedes usarlos con @babel/preset-env para segmentar solo los navegadores que los admiten.
En lugar de consultar versiones específicas del navegador o la participación de mercado, considera especificar "esmodules" : true dentro del campo targets de tu archivo .babelrc.
{
"presets":[
[
"@babel/preset-env",
{
"targets":{
"esmodules": true
}
}
]
]
}
Muchas de las funciones más recientes de ECMAScript compiladas con Babel ya son compatibles con los entornos que admiten módulos de JavaScript. De esta manera, simplificas el proceso de asegurarte de que solo se use código transpilado para los navegadores que realmente lo necesitan.
Los navegadores que admiten módulos ignoran las secuencias de comandos con un atributo nomodule.
Por el contrario, los navegadores que no admiten módulos ignoran los elementos de secuencia de comandos con type="module". Esto significa que puedes incluir un módulo y una alternativa compilada.
Lo ideal es que los dos scripts de versión de una aplicación se incluyan de la siguiente manera:
<script type="module" src="main.mjs"></script>
<script nomodule src="compiled.js" defer></script>
Los navegadores que admiten módulos recuperan y ejecutan main.mjs, y omiten compiled.js. Los navegadores sin compatibilidad con módulos hacen lo contrario.
Si usas webpack, puedes establecer diferentes destinos en tus configuraciones para dos versiones separadas de tu aplicación:
- Es una versión solo para navegadores que admiten módulos.
- Una versión que incluye una secuencia de comandos compilada que funciona en cualquier navegador heredado. Esto genera un tamaño de archivo más grande, ya que la transpilación debe admitir una mayor variedad de navegadores.
Agradecemos a Connor Clark y Jason Miller por sus revisiones.