Magia con Babel Macro

Muy buenos días, muy buenas tardes y buenas noches, según el lugar desde donde te estés uniendo. Mi nombre es Trubesh y hoy voy a dar una charla sobre la magia con los macros de Babel. Antes de adentrarnos en el tema, también quiero hablar sobre por qué este tema, ¿verdad? Creo que los macros de Babel se introdujeron en 2017, 2018. Y parecía ser algo realmente fascinante por las cosas que puedes hacer solo con eso, ¿verdad? Surgieron muchos patrones debido a eso y, sí, pero hoy en día no mucha gente habla de ello. Así que pensé, ¿por qué no intentarlo y ver si ustedes están interesados? El objetivo de esta charla es brindarte una introducción sobre los macros de Babel para que puedas

Entonces, esa es básicamente mi presentación. Vamos a pasar a la charla. Entonces, AST, ¿verdad? AST es algo increíble. Significa abstract syntax T. Es algo increíble y creo que todos los desarrolladores deberían aprender sobre ello. Porque es uno de los componentes fundamentales de los transpiladores que utilizan tus complementos para transpilar tu código, ¿verdad? Y sin conocerlo, es posible que no puedas entender cómo se transpila tu código. Así que, cuando escuché sobre este término AST, me dio mucha curiosidad y por supuesto, encendí mi computadora portátil y traté de buscar qué es un AST. Y lo primero que encontré fue en Wikipedia. Y esta fue la definición que me encontré. Dice que en ciencias de la computación, un árbol de sintaxis abstracta o simplemente árbol de sintaxis, es una representación de la estructura sintáctica abstracta de un texto escrito en un lenguaje formal. Así que esto no me ayudó mucho, fue una definición bastante compleja para mí. Y no entendí realmente qué es exactamente un AST. Y como sabemos, muchas personas que programan no necesariamente tienen formación en ciencias de la computación. Así que, para ellos, esto no tiene mucho sentido. Así que traté de encontrar una definición mejor que sea mucho más simple de entender. Y me encontré con esta definición. Dice que un árbol de sintaxis abstracta o AST es una representación en forma de árbol del código fuente de un programa de computadora que transmite la estructura del código fuente. Entonces, lo que significa esencialmente es que puedes mirar el AST y

Del mismo modo, si avanzas y exploras la segunda declaración de variable, déjame cerrar esta. Sí. Podemos explorar esto y también tiene algo similar, pero como puedes ver, el tipo aquí es const y el tipo aquí era let. Y podemos seguir adelante y verificar la flecha dentro de la función interna. Menciona explícitamente que es una función de flecha. Veamos cómo se ve si es una función normal. Así que, puedo convertir rápidamente esto en una función normal. Y sí, boom. Esta es una función normal. ¿Verdad? Esta es una función normal. En esto, simplemente dice declaración de función. No menciona lo que llamas función de flecha. No menciona eso. Simplemente dice declaración de función. Dentro del cuerpo, tenemos la declaración de bloque. De hecho, podemos explorar eso.

Babel comenzó como un transpilador, pero quiero decir que te permite escribir la versión actualizada de cualquier especificación de ECMAScript, incluso para los navegadores donde esas expresiones actualizadas o lo que sea no son compatibles. Puedes hacer eso usando Babel. Pero, terminó convirtiéndose, ya sabes, en algo más que eso. Y de hecho, podemos echar un vistazo rápido y, ya sabes, ver cómo podemos transformar algo en Babel en vivo.

Entonces, sí. Puedes ir a AST Explorer, y puedo seleccionar el analizador de Babel aquí. Y déjame cerrar esto. Puedo copiar y pegar. Sí. Puedo copiar y pegar esto aquí. Y este es, nuevamente, el AST que exploramos anteriormente. Y puedo, podemos probar una cosa, que es intentar invertir el nombre de la variable para que después de la transformación. Aquí es donde se encuentra la transformación. Este es el código que escribimos. Y aquí es donde puedes escribir todas las especificaciones que desees. Y esta es la versión en forma de árbol. Quiero decir, la salida del AST.

Entonces, dentro del identificador, puedo hacer console.log path rápidamente. Y puedo aumentar tal vez. Y dentro del nodo path tenemos un nodo y tenemos el nombre, tenemos la ubicación LOC, la posición final, la posición inicial. El nombre del archivo no está completo por razones obvias. Creo que esto apunta a esto. Entonces, si estamos intentando actualizar el nombre aquí, entonces creo que podemos hacer algo más. Entonces, sort igual a node.path.name, podemos dividirlo. Podemos invertir esto. Y podemos simplemente unir esto. Oops.

Será path.node. Sí. Ahora creo que puedes ver aquí, esto se supone que es a través de la charla base. Se supone que esto es obtener el nombre del orador. Y así es como se desarrolla la transformación.

Así que hablemos un poco sobre las macros de Babel. Las macros de Babel son, en esencia, una forma de aplicar transformaciones de código sin tener que instalar muchos complementos en cada transformación. Y lo mejor de todo es que son compatibles con, ya sabes, CRA, Gatsby, Next.js y casi todos los demás frameworks basados en React.

Entonces, ¿por qué las macros de Babel, verdad? El problema con los complementos regulares de Babel es, por supuesto, que son geniales, pero tienen algunas desventajas. Por ejemplo, puede ser difícil para los usuarios configurarlo y configurarlo, especialmente cuando se trata de herramientas como CRA o Gatsby. Por supuesto, también puede haber conflictos o situaciones en las que tengas que depurar ciertas cosas porque, debido a la forma en que se configura los complementos, el orden de los complementos importa mucho. Entonces, si desordenas el orden, es realmente difícil, es realmente difícil depurarlo tal cual.

Entonces, usamos algo llamado macros de complementos de Babel para escribir esto y las macros de complementos de Babel en sí mismas son un complemento. Creo que podemos explorar algunas de ellas. Una de ellas, que es una de mis favoritas, me gusta, es la traducción de seguimiento. Puedes poner la cadena aquí y se transformará en el valor que sea. Creo que esto es alto en vietnamita y también tenemos macros de CSS a React Native. Aquí puedes escribir CSS normal. Se convertirá en hojas de estilo de React Native. La salida será este tipo y para aquellos con experiencia en Angular, si te falta NGF, puedes intentar descubrirlo, puedes explorar esto también donde TGF se convierte en este tipo. Pero hay algunas advertencias que debes tener en cuenta. Una es que las macros son síncronas, si intentas escribir una, debes asegurarte de que se ejecute en el entorno de nodo o en la máquina donde se ejecute la macro y las macros se evalúan también en tiempo de compilación. También debes tener eso en cuenta al construir una.

Creo que eso es todo el tiempo que tengo hoy, amigos. Gracias por escuchar mi charla. Tenemos muchas charlas programadas para hoy a la una, así que manténganse atentos y muchas gracias por escuchar a mí. Que tengan un buen día.