Escribiendo tu Primer Plugin de Vite

Hola, hablemos sobre cómo escribir tu primer plugin Vip. En esta charla, hablaré sobre VIT, rollup, plugin Vip y algunos ejemplos.

Mi nombre es Eunjae, soy de Corea del Sur, actualmente vivo en Francia. Trabajo en Cal.com, y solía trabajar en estas increíbles empresas.

VIT es una herramienta muy importante en nuestro desarrollo front-end. Es un servidor de desarrollo, transpilador, empaquetador, y es todo. Escribimos TSX y JSX, y estos son los archivos que los navegadores no entienden. Así que tenemos que convertirlos en archivos JavaScript. ¿Y cómo hacemos eso? Probablemente VIT está haciendo algo, y sabemos que el plugin Vip está haciendo algo.

Pero antes de profundizar en el plugin Vip, echemos un vistazo a rollup primero. Rollup es un empaquetador, y tiene un gran impacto en el ecosistema de bibliotecas JavaScript. Por ejemplo, tenemos source slash main.js, que está importando a.js, que está importando b.js, etcétera. Tenemos esta enorme cadena de importaciones, y rollup puede empaquetar todo en un solo archivo.

Por ejemplo, tenemos main.js. Está importando message de message.js, y estamos registrando en la consola message. Y message.js está exportando hello world. Y cuando rollup lo empaqueta, tenemos esto, dist slash output.js, y hello world está directamente incrustado aquí. Y no vemos declaración de importación o exportación, porque rollup empaqueta todo en un solo archivo. Y con VIT, importamos image URL de image.png, y cuando ejecutamos este código, VIT revisa todos los plugins que están registrados en este proyecto. Y pregunta, ¿puedes manejar ese png? ¿Puedes manejar ese png? ¿Puedes manejar ese png? Oh, puedes manejarlo. Entonces deberías leer el archivo y transformarlo en un módulo JS.

Rollup y VIT tienen una arquitectura de plugins muy similar. De hecho, VIT adaptó la arquitectura de plugins de rollup desde el principio. Así que creo que esa es una de las mayores razones por las que VIT ha sido exitoso desde el primer día. Porque podemos usar cualquier plugin rollup existente en VIT. El plugin es un objeto con propiedades opcionales. Y hoy, voy a hablar de tres de ellas. Primero, resolver ID. Devuelve el ID, y también puede interpretarse como, ¿puedes manejarlo? Así que si este plugin devuelve el ID, significa que puede manejarlo. Luego pasa a la función de carga, que literalmente carga el archivo o el módulo.

Y luego puede ir a la función transform, donde puedes transformar el módulo en algo más. Echemos un vistazo más profundo.

Resolver ID. ¿Cuál es el ID de este archivo o módulo? Y aquí, ID significa nombre de la biblioteca, ruta del archivo, etc. Tenemos este ejemplo. Y cuando se llama a resolver ID, se pasa la cadena image.png como parámetro source. Y podemos implementarlo así. Si source termina con .png, entonces devolvemos source. Al devolver algo, da la señal de que este plugin puede manejar este source. Y luego irá a la función load.

Y si devuelve null, entonces significa, no sé, tal vez algunos otros plugins puedan manejar esto, pero yo no. Y la función load lee el archivo o módulo y devuelve su contenido. Como, si implementamos esta función load de una manera tonta, se verá así. Así que lee el archivo y simplemente devuelve el contenido del archivo. Pero en realidad, es más complicado. Y transform, literalmente transforma el archivo o módulo en otra cosa. Por ejemplo, si ID termina con .view, o si ID termina con .jsx, podemos hacer algo con el código y devolver el resultado. Así que si tenemos este código de Vue.js, podemos devolver esto. Y si tenemos este código de React, podemos devolver esto. Así que cuando hablamos de transpilador, en realidad, las cosas suceden en esta función transform.

Hagamos los ejemplos reales. Tenemos este código. Console.log Node-inv, process.inv Node-inv. Si eso es producción, entonces Console.log, esto es producción. Si no, esto no es producción. Escribimos este código, pero al final, cuando desplegamos este código, queremos que este Node-inv sea producción, ¿verdad? Y significa que la declaración if siempre es verdadera. Y significa que podemos deshacernos de esta cláusula else. Así que podemos reescribir esto en este código. Pero esto no sucede automáticamente. Requiere nuestro trabajo transformar el código anterior en este.

Así que escribamos un plugin que haga esto por nosotros. En este ejemplo, estoy usando Rollup y rollup-c significa que estoy usando el archivo rollup.config.js. Y aquí, tengo este plugin vacío, que tiene nombre y transform. Y declaramos entrada y salida así. Y en el source, main.js, tenemos el mismo código, ¿verdad?

Ahora necesitamos escribir el plugin para transformar esto en otra cosa. Así que antes de eso, vamos y npm run build. Y no hace nada. Y la salida es la misma que el código fuente. Y hagamos console.log primero. Source e ID. Y lo ejecutamos de nuevo. Y obtenemos source, que es literalmente el source. Y ID es la ruta completa del archivo.

Así que lo que podemos hacer es devolver source.replaceAll process.inf.nodeInf y JSON stringify production. Y si lo ejecuto de nuevo, está funcionando. Ya está funcionando. Sí. Eso fue fácil, ¿verdad? Pero, ¿qué pasa con este JSON stringify? Es un poco raro. Como, ¿y si simplemente ponemos production así? Y ahora algo es raro, ¿verdad? Production sin comillas. En realidad, esta es una regla de Rollup. Así que siempre necesitamos stringify para el resultado que esperamos. Ahora funciona de nuevo. En realidad, esta implementación es estúpida. No hagas esto porque reemplazo todo. Y puede reemplazar cadenas incorrectas inesperadamente. Así que en realidad, necesitas analizar el código y reemplazarlo adecuadamente. Pero esto es solo una demo.

Así que veamos el segundo ejemplo. Tenemos este endpoint de API. Y proporciona este array de usuarios. Y queremos extraer el nombre de usuario. Entonces, ¿cómo harías eso? Debería ser algo así. Hacemos fetch desde esta URL y obtenemos el JSON y mapeamos sobre el array y extraemos este nombre de usuario. Por supuesto, como el manejo de errores, no lo estoy haciendo ahora mismo. Pero eso es bastante simple. Y podemos hacer esto.

Pero, ¿qué pasa si necesitamos realizar una tarea muy pesada? ¿Qué pasa si es una tarea muy pesada con datos estáticos que se puede manejar en tiempo de compilación? En ese caso, podemos usar un módulo virtual. Así que el módulo virtual, no está dentro de patch.json. Pero de alguna manera funciona. Es raro, ¿verdad? Por ejemplo, tenemos import usernames from non-existing library y hacemos console.log high usernames. Por ejemplo, tenemos users.js y está exportando usernames. Y main.js está importando estos usernames y console.log. Y después de hacer el bundle, obtenemos algo como esto. Así que porque el bundler agrupa todo en un solo archivo y elimina todas las declaraciones de import y export, usernames está incrustado así, ¿verdad?

Justo así. Cuando usamos un módulo virtual, aunque non-existing library no está en patch.json, el bundler puede de alguna manera obtener este módulo y producir esta salida de bundle. Así que para que esto suceda, podemos escribir un plugin fit. Y se verá así. Así que resolve ID. Y si source es non-existing library, entonces podemos devolver source, lo que significa, sí, déjame manejarlo. Puedo hacer eso. Y luego pasa a una función load. Y si ID es non-existing library, entonces podemos devolver una cadena que se vea así, un módulo de JavaScript. En este ejemplo, estoy usando un fit. Y tenemos esta biblioteca de tiempo de compilación de plugin vacía. Y está usando resolve ID y la función load. Y pongo este plugin en el array de plugins.

Y tenemos este main.js que está importando usernames de mi biblioteca de tiempo de compilación, la cual no existe en patch.json. Si ejecuto build, falla, por supuesto, porque rollout no pudo resolver la importación de mi biblioteca de tiempo de compilación. Porque no existe en patch.json. Así que necesitamos simularlo. Así que aquí estamos poniendo un objeto. Y usernames es una clave y el valor es la función getter. Así que hagámoslo async y fetch. Y await. Y obtenemos el JSON. Podemos mapear y username. Es el mismo código que vimos antes en la diapositiva.

Así que en plugin, resolve ID. Si source es mi biblioteca de tiempo de compilación, devolvemos mi biblioteca de tiempo de compilación, lo que significa que puedo manejar eso. Y si ID es mi biblioteca de tiempo de compilación, entonces puede devolver un módulo JS. Y en este caso, vamos a codificar primero. Import const usernames, así. Y ejecutémoslo de nuevo. Ahora está funcionando. Y si miramos este archivo, tenemos usernames. Sí, está funcionando. Si comparas esto, esta declaración de importación ha desaparecido, y usernames está incrustado en esta salida.

Si agrego una cosa más aquí, sí, todavía está funcionando. Así que en lugar de esta codificación, vamos a implementar algo. Así que proporcionamos el objeto de fábricas. Así que la clave es el nombre y el valor es la función getter. Claves del objeto, fábricas, y lo recorremos. Y getter es la clave de fábricas. Y el valor es así. Y si el valor es una instancia de promesa, necesitamos esperar este valor. Y necesitamos almacenar este par clave-valor, ¿verdad? Así que creemos result y result key es value.

Y tomemos un descanso y console loop este objeto result. Sí, todavía está fallando, pero está bien. Sí, result es un objeto con usernames y este array.

Ahora transformemos este result en algo así. Así que object keys result. Y hagamos map aquí. Y parece export const key. Y JSON stringify result key, que es el valor. Y unimos este array. Y lo ponemos en una variable. Y devolvemos este código. Y antes de eso, hagamos console loop del código primero.

Ejecútalo de nuevo. Ahora vemos un código export const usernames. Está funcionando bien. Y aquí podemos ver que está funcionando bien. Y porque lo hicimos tan flexible, podemos tener algo más como built at. Así que aquí podemos agregar built at y new date to ISO stream.

Si lo ejecutas de nuevo, ahora ves que tenemos export const usernames y también built at. Y si miramos el archivo, sigue funcionando bien. En este ejemplo, procesamos datos en tiempo de construcción. Y la salida del bundle incluye solo el resultado del cálculo, no la lógica de negocio. Pero por supuesto, si el resultado del cálculo va a ser un array de un millón de user names, entonces no deberíamos hacer eso. Así que piensa cuándo usarlo y dónde usarlo. Y puedes usarlo para cálculos intensivos y obtener información relacionada, como el último commit o nombre de la rama. Así que imagina que estás desplegando una versión de staging. Y en la esquina superior izquierda, puedes poner el nombre de la rama o el hash del commit. Y también puedes usarlo para obtener la estructura del directorio local.

Así que puedes leer algún archivo Markdown y obtener las propiedades de front matter, o incluso implementar tu propio enrutamiento basado en archivos. Y puedes incluso implementar un lenguaje específico de dominio si quieres ir más allá.

Así que he hablado sobre el tiempo de construcción versus el tiempo de ejecución y el módulo virtual. Pero en realidad, cuando se trata de un plugin Vip, estos son solo una parte de un plugin Vip. Y estos son pequeños temas que elegí para demostrar cómo se ve un plugin Vip y cómo funciona.

Así que si vas al Awesome Vip Repository, tiene una gran lista de plugins Vip muy interesantes. Y la posibilidad es realmente, realmente más grande de lo que piensas. Y dale una oportunidad. Si escaneas este código QR, tiene esta diapositiva, pero también un repositorio de múltiples ejemplos que te muestran cómo puedes hacer las cosas.

Pero te doy una advertencia. He aprendido algo nuevo hoy. Creo que puedo aplicar esta solución a mi problema. Probablemente esté equivocado. Bien, tengo este problema. Estas son las posibles soluciones. Bien, esta tiene más sentido. Entonces sí. Así que deberías pensar de esta manera. Pero ahora que acabamos de aprender esto, dale una oportunidad, pero no en tu trabajo. Solo crea un nuevo proyecto y juega con él y ve cómo funciona. Y solo contáctame si tienes alguna pregunta. Estoy en Twitter en Ninja underscore Lee. Gracias por ver.