Compilar sitios web que funcionen bien en todos los navegadores principales es un principio fundamental de un ecosistema web abierto. Sin embargo, esto implica un trabajo adicional de garantizar que todo el código que escribas sea compatible con cada navegador al que apuntes. Si deseas usar funciones nuevas del lenguaje JavaScript, debes transpilarlas a formatos compatibles con versiones anteriores para los navegadores que aún no las admiten.
Babel es la herramienta más usada para compilar código que contenga una sintaxis más reciente en código que puedan entender diferentes navegadores y entornos (como Node). En esta guía, se supone que usas Babel, por lo que debes seguir las instrucciones de configuración para incluirla en tu aplicación si aún no lo has hecho. Selecciona webpack en Build Systems si usas webpack como el agrupador de módulos en tu app.
Si deseas usar Babel para transpilar solo lo que necesitan tus usuarios, debes hacer lo siguiente:
- Identifica para qué navegadores deseas segmentar tus anuncios.
- Usa
@babel/preset-envcon orientaciones de navegador adecuadas. - Usa
<script type="module">para dejar de enviar código transpilado a navegadores que no lo necesiten.
Identifica para qué navegadores 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 tu aplicación. Analiza qué navegadores usan tus usuarios en la actualidad y cuáles planeas segmentar para tomar una decisión fundamentada.
Usa @babel/preset-env
Por lo general, la transpilación del código genera un archivo de mayor tamaño que los formularios originales. Si minimizas la cantidad de compilaciones, podrás reducir el tamaño de los paquetes y 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 una serie de ajustes predeterminados que agrupan los complementos. Usa @babel/preset-env para incluir solo las transformaciones y polyfills necesarias para los navegadores a los que planeas segmentar.
Incluye @babel/preset-env en el arreglo presets del archivo de configuración de Babel, .babelrc:
{
"presets": [
[
"@babel/preset-env",
{
"targets": ">0.25%"
}
]
]
}
Usa el campo targets para especificar qué versiones del navegador quieres incluir. Para ello, agrega una consulta adecuada al campo browsers. @babel/preset-env se integra con browselist, una configuración de código abierto que se comparte entre diferentes herramientas para orientar a navegadores. Puedes encontrar una lista completa de consultas compatibles en la documentación de la lista de navegadores.
Otra opción es usar un archivo .browserslistrc para enumerar los entornos a los que quieres orientarte.
El valor ">0.25%" le indica a Babel que solo incluya las transformaciones necesarias para admitir navegadores que representan más del 0.25% del uso global. Esto garantiza que tu paquete no contenga código transpilado innecesario para navegadores que usa un porcentaje muy pequeño de usuarios.
En la mayoría de los casos, este es un enfoque mejor que usar la siguiente configuración:
"targets": "last 2 versions"
El valor "last 2 versions" transpila tu código a las dos últimas versiones de cada navegador, lo que significa que se ofrece compatibilidad con navegadores descontinuados, como Internet Explorer.
Esto puede aumentar de forma innecesaria 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 orientarla solo a los navegadores que se ajusten a tus necesidades.
Cómo habilitar correcciones de errores modernas
@babel/preset-env agrupa varias funciones de sintaxis de JavaScript en colecciones y las habilita o inhabilita según los navegadores de destino especificados. Aunque esto funciona bien, una colección completa de funciones de sintaxis se transforma cuando un navegador orientado contiene un error con una sola función.
Esto suele dar como resultado un código más transformado de lo necesario.
La opción de correcciones de errores de @babel/preset-env se desarrolló originalmente como un ajuste predeterminado independiente, y resuelve este problema convirtiendo la sintaxis moderna que no funciona en algunos navegadores a la sintaxis equivalente más cercana que no funciona correctamente 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 de destino. Para usar esta optimización, asegúrate de tener instalado @babel/preset-env 7.10 o una versión posterior 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 compatible con 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 apuntar solo a navegadores que los admitan.
En lugar de buscar versiones específicas del navegador o participación de mercado, considera especificar "esmodules" : true dentro del campo targets del 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 entornos que admiten módulos de JavaScript. De esta manera, puedes simplificar el proceso de asegurarte de que solo se use el código transpilado para los navegadores que realmente lo necesiten.
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 secuencias de comandos con type="module". Esto significa que puedes incluir un módulo y un resguardo compilado.
Lo ideal sería que las dos secuencias de comandos de versiones 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, pero ignoran compiled.js.
Los navegadores que no admiten módulos hacen lo contrario.
Si usas webpack, puedes establecer diferentes objetivos en la configuración de dos versiones separadas de tu aplicación:
- Es una versión solo para navegadores que admiten módulos.
- Es una versión que incluye una secuencia de comandos compilada que funciona en cualquier navegador heredado. Este tiene un tamaño de archivo mayor, ya que la transpilación debe admitir una gama más amplia de navegadores.
Gracias a Connor Clark y Jason Miller por sus opiniones.