Sum y babel sum JS [Ejercicio práctico]

Si quieres especializarte en desarrollo web, acompáñanos en este ejercicio de sum y babel sum JS, donde vamos a ver en acción la herramienta de Babel. Esto nos permitirá trabajar con navegadores de cualquier tipo y de cualquier antigüedad. Por ejemplo, podremos transpilar un extracto de código de sintaxis muy moderna en un extracto de código de sintaxis menos moderna, lo que le permitirá a cualquier usuario acceder y ver nuestro código de forma instantánea sin que perdamos usuarios, ventas o cualquier otro beneficio.

Anímate a seguir leyendo y aprender sobre Babel con este ejercicio práctico de sum y babel sum JS.

Aprendamos con un ejercicio práctico

Imagina que el público objetivo de tu marca, que puede ser de venta de prótesis, son personas mayores, que usualmente no tienen las últimas actualizaciones de los navegadores o de los sistemas operativos en sus dispositivos. En este caso, es posible que estés perdiendo dinero por la incompatibilidad de JavaScript con navegadores antiguos.

Por ejemplo, puedes montar una pieza publicitaria que integre un formulario de suscripción, que realiza una validación con el lenguaje JavaScript. Este contiene una sintaxis moderna que necesita navegadores actualizados y, por tanto, al encontrarte con personas mayores interesadas que poseen navegadores antiguos, vas a perder la oportunidad de venta.

Es por eso que, en ese momento, necesitaríamos un transpilador que permita que la sintaxis se transforme, para que los navegadores antiguos puedan leerla. Babel es una herramienta que nos permite compilar cualquier archivo, por lo que solo necesitamos el nombre y el archivo en concreto.

Sum y babel sum JS

Para profundizar en las configuraciones del transpilador de Babel, vamos a trabajar en este ejercicio práctico, que nos permite ver cuáles son las funcionalidades y cómo nos pueden ayudar. Por tanto, vamos a crear una sumatoria cualquiera, que después intentaremos ejecutar con dos tipos de navegadores diferentes:

#demo de sum.js
const sum = (...array) => {
          console.log (array.reduce ((c, n) => c + n, 0));
};

sum (1, 2, 3, 4, 5);

Para crear una variante de tipo babel, vamos a tener que pasar el siguiente comando en nuestra línea de comandos del IDE:

npx babel demos/sum.js --out-file demos/babel-su.js

De esta manera, hemos utilizado npx para tirar una de las versiones más antiguas que tengamos instaladas. Esta puede generar un synatxis error, pero tendremos el archivo variante de esta misma operación. Como ves, tendrá la misma sintaxis.

¿Qué tendremos que hacer para cambiar esto? Tendremos que emplear las configuraciones de Babel. Esta es una herramienta que funciona con transformadores para cada uno de los elementos que existen de la sintaxis moderna. Cada transformador hace una operación que después se une con el resto de transformadores; según la herramienta, se etiquetan como un plugin.

Estos plugins se pueden encontrar en la documentación de Babel y deberán integrarse en un nuevo archivo del programa, al que llamaremos babel.config.json. En este caso, vamos a utilizar el preset del entorno de Babel:

{
     "prestes": ["@babel/preset-env"]
}

Cuando ejecutamos este nuevo cambio y el archivo mismo, en el momento en el que accedas al archivo de babel-sum.js, vas a ver que la sintaxis ha cambiado.

Gracias al transpilador de Babel, podemos cambiar una sintaxis moderna a una sintaxis antigua, y a la inversa, para que se puedan leer todos los extractos de código. Así, podremos obtener la respuesta que queremos, como se ilustra en la siguiente imagen:

Crea tu propio sitio web

Con este ejercicio práctico hemos profundizado en qué son sum y babel sum JS y cuál es su utilidad. Si quieres explorar mucho más, visita el temario de nuestra formación en Desarrollo Web Full Stack Bootcamp, el curso intensivo e íntegro ideal para que impulses tu futuro laboral como desarrollador. ¡Anímate a cambiar tu vida y entra ya mismo para solicitar más información!