Crear sitios web que funcionen bien en todos los navegadores principales es un principio fundamental de ecosistema web abierto. Sin embargo, esto implica un trabajo adicional para garantizar que todos el código que escribas sea compatible con todos los navegadores a los que te orientes. Si Si quieres usar funciones nuevas del lenguaje JavaScript, debes transpilarlas y funciones compatibles con versiones anteriores para navegadores que aún no son compatibles de ellos.
Babel es la herramienta más usada para compilar código
que contiene una sintaxis más nueva en código que diferentes navegadores y entornos
(como Node) puedan entender. En esta guía, se presupone que utilizas Babel, por lo que
debes seguir las instrucciones de configuración para
inclúyela en tu aplicación si aún no lo has hecho. Seleccionar webpack
en Build Systems si usas webpack como agrupador de módulos en tu app.
Si usas Babel para transpilar solo lo que necesitan tus usuarios, para lo siguiente:
- Identifica a qué navegadores deseas orientar los anuncios.
- Usa
@babel/preset-envcon las orientaciones adecuadas del navegador. - Usa
<script type="module">para dejar de enviar código transpilado a los navegadores que no lo necesitan.
Identifique a qué navegadores desea orientar sus anuncios
Antes de comenzar a modificar cómo se transpila el código de tu aplicación, necesitas identificar qué navegadores acceden a tu aplicación. Analiza los navegadores tus usuarios actualmente, así como aquellos a los que planeas orientarte para hacer una decisión fundamentada.
Usa @babel/preset-env
La transpilación de código generalmente da como resultado un archivo de mayor tamaño que sus formas originales. Al minimizar la cantidad de compilación que haces, puede reducir el tamaño de los paquetes para mejorar el rendimiento de una página web.
En lugar de incluir complementos específicos para compilar de forma selectiva cierto lenguaje que usas, Babel ofrece una serie de ajustes preestablecidos que agrupan entre sí. Usa @babel/preset-env incluir solo las transformaciones y los polyfills necesarios para los navegadores que planeas usar la segmentación de clientes.
Incluye @babel/preset-env en el array presets de tu Babel.
archivo de configuración, .babelrc:
{
"presets": [
[
"@babel/preset-env",
{
"targets": ">0.25%"
}
]
]
}
Usa el campo targets para especificar las versiones del navegador que deseas incluir.
Para ello, agrega una consulta adecuada al campo browsers. @babel/preset-env
se integra con la lista de navegadores, una configuración de código abierto que se comparte entre
herramientas para orientar anuncios a navegadores. Encontrarás una lista completa de consultas compatibles en el
documentación debrowserslist.
Otra opción es usar un archivo .browserslistrc para enumerar los entornos.
a los que desea orientar sus anuncios.
El valor ">0.25%" le indica a Babel que solo incluya las transformaciones.
necesaria para admitir los navegadores que componen más del 0,25% del
de uso de la nube. Esto garantiza que tu paquete no contenga datos
para navegadores que usa un porcentaje muy pequeño de usuarios.
En la mayoría de los casos, este es un enfoque mejor que utilizar el siguiente actual:
"targets": "last 2 versions"
El valor "last 2 versions" transpila tu código para el
las dos últimas versiones de cada navegador
lo que significa que se ofrece asistencia para los navegadores descontinuados, como Internet Explorer.
Esto puede aumentar innecesariamente el tamaño del paquete si no esperas estos
navegadores que se usarán para acceder a tu aplicación.
Por último, debes seleccionar la combinación adecuada de consultas y adaptarlos a tus necesidades.
Habilitar correcciones de errores modernas
@babel/preset-env agrupa varias funciones de la sintaxis de JavaScript en colecciones y las habilita o inhabilita.
en función de los navegadores de destino especificados. Aunque esto funciona bien, una colección completa de
las funciones de sintaxis se transforman cuando un navegador orientado contiene un error con solo una función.
A menudo, esto genera más código transformado de lo necesario.
Se desarrolló originalmente como un ajuste predeterminado independiente, el
opción de corrección de errores en @babel/preset-env
resuelve este problema convirtiendo la sintaxis moderna que no funciona en algunos navegadores al
una sintaxis equivalente que no esté dañada en esos navegadores. El resultado es un código moderno casi idéntico
con algunos pequeños ajustes en la sintaxis que garantizan la compatibilidad en todos los navegadores objetivo. Para usar
optimización, asegúrate de tener instalado @babel/preset-env 7.10 o una versión posterior y, luego, establece la
propiedad bugfixes para 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 de ES, son una función relativamente nueva admitida 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
Úsalas con @babel/preset-env para segmentarla solo a navegadores compatibles
de ellos.
En lugar de buscar versiones específicas del navegador o participación de mercado, considera
Especificando "esmodules" : true en el campo targets de tu archivo .babelrc.
{
"presets":[
[
"@babel/preset-env",
{
"targets":{
"esmodules": true
}
}
]
]
}
Ya se admiten muchas funciones más recientes de ECMAScript compiladas con Babel. en entornos compatibles con módulos de JavaScript. Entonces, al hacer esto, simplifican el proceso de asegurarse de que solo se use el 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 script 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 la 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 e ignoran compiled.js.
Los navegadores que no admiten módulos hacen lo contrario.
Si usas webpack, puedes establecer distintos objetivos en la configuración 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. Este tiene un tamaño de archivo mayor, ya que la transpilación debe ser compatible con una variedad más amplia de navegadores.
Agradecemos a Connor Clark y Jason Miller por sus opiniones.