La charla cubrirá todas las posibilidades que Babel Macro abre y también dará una visión general del Árbol de Sintaxis Abstracta.
Magia con Babel Macro
Video Summary and Transcription
Los macros de Babel permiten la transformación de código sin necesidad de múltiples complementos, proporcionando una solución a las desventajas de los complementos regulares de Babel. Comprender el AST es crucial para los desarrolladores que trabajan con transpiladores, y explorar su estructura y representaciones puede ayudar a derivar código. Babel comenzó como un transpilador pero ha evolucionado hacia una herramienta para la transformación de código en vivo. Los macros de Babel son compatibles con varios frameworks basados en React y se pueden utilizar para la traducción de seguimiento y los macros de CSS a React Native. Sin embargo, los macros tienen limitaciones, como ser síncronos y evaluados en tiempo de compilación.
1. Introducción a los macros de Babel
En esta charla, presentaré los macros de Babel y explicaré cómo se pueden utilizar para escribir complementos y construir macros.
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
2. Introducción a Srivesh y AST
En esta parte, Srivesh se presenta y habla de su experiencia en desarrollo de software. También menciona su canal de YouTube y su podcast. Luego, Srivesh pasa a discutir la importancia de AST en los transpiladores y la necesidad de que los desarrolladores lo comprendan. Comparte su experiencia de investigación sobre el tema y proporciona una definición simplificada de AST como una representación en forma de árbol del código fuente que transmite su estructura.
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
3. Importancia de AST en los Transpiladores
En esta parte, Srivesh discute la importancia de AST en los transpiladores y la necesidad de que los desarrolladores lo comprendan. Anima a la audiencia a explorar AST a través del explorador de AST y proporciona un ejemplo de cómo escribir código ficticio para ver cómo se ve en AST.
4. Explorando Declaraciones de Variables y Tipos de Funciones
Exploramos cada declaración de variable y analizamos la información disponible, como las posiciones de inicio y fin, los valores de inicialización y el tipo de declaración. También distinguimos entre declaraciones de variables y declaraciones de expresiones, que implican la actualización de valores. Además, comparamos el tipo de declaración entre diferentes declaraciones de variables y exploramos la declaración de funciones de flecha y funciones normales, notando la diferencia en la representación del AST.
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.
5. Explorando la Estructura y Representaciones del AST
Dentro de la función de flecha, hay una declaración de bloque con una declaración if y una declaración de retorno. La declaración if tiene un consecuente, que es otra declaración de bloque con un tipo de retorno. La prueba dentro de la declaración if compara la variable nombrePerro con otra variable usando triple igual. La representación del AST incluye el tipo const y una expresión de llamada con un argumento que apunta a una cadena. La estructura del AST se puede utilizar para derivar el código. Hay otras representaciones del AST, como la parte JSON y join.js, que proporcionan una explicación detallada de nodos, tokens, palabras clave, identificadores y signos de puntuación. El AST es una estructura de árbol que es más legible para los humanos que el propio AST. Ahora, hablemos un poco sobre Babel.
6. Explorando Babel y las Transformaciones del AST
Babel comenzó como un transpilador pero evolucionó hacia algo más. Podemos transformar código en vivo utilizando AST Explorer y el analizador de Babel. Al manipular el AST, podemos invertir los nombres de las variables y aplicar otras transformaciones.
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.
7. Comprendiendo las Macros de Babel y la Transformación de Código
Las macros de Babel son una forma de aplicar transformaciones de código sin instalar múltiples complementos. Son compatibles con varios marcos basados en React. Los complementos regulares de Babel tienen desventajas, como dificultades en la configuración y conflictos de depuración. Las macros de complementos de Babel proporcionan una solución. Ejemplos incluyen macros de traducción de seguimiento y CSS a React Native. Las macros tienen advertencias, como ser síncronas y evaluadas en tiempo de compilación.
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.