Vite y los Node.js modules al crear un NPM module

By   Skrigueztep Skrigueztep Thu Aug 29 2024

Recientemente trabajando con algunos módulos personales y otros organizacionales, había tenido complicaciones para poder hacer la construcción (o build), ya que entre unas dependencias y otras no eran compatibles por el uso de CJS y ESM en conjunto, también porque; para evitar usar dependencias extra las estaba transpilando por medio de tsc, el compilador de Typescript. Pero opte por dejar de lado mis expectativas y agregar una herramienta que me ayude en el proceso de construcción y así evitarme los problemas.

Node.js es el entorno de ejecución de Javascript del lado del servidor, es decir; es el que nos permite ejecutar archivos javascript sin necesidad del buscador.

Vite es una herramienta de tooling para frontend utilizada para poder, entre otras cosas; transpilar y empaquetar proyectos Javascript, algo similar a herramientas como Webpack, Snowpack, TurboPack, Rollup y un largo etc…

La mejor alternativa para poder hacer el proceso de construcción, para que fuera rápido y eficiente era usar vite, y principalmente porque en el contexto de desarrollo en el cual participo es más fácil que le puedan meter mano para el mantenimiento y se comprenda mejor el funcionamiento. Así que una vez instalado y configurado ya podría iniciar a trabajar con el.

Las configuraciones quedaron de la siguiente forma:

vite.config.js

Y como quería generar tanto los archivos para CJS como para ESM agregué 2 archivos de configuración de typescript:

tsconfig.esm.js y tsconfig.cjs.json

Finalmente el package.json quedó sencillo:

scripts en el package.json

Y con esto al ejecutarse ya se generaban de forma correcta los archivos en el directorio dist junto con sus tipos

Pero a la hora de la construcción…. Oh! sorpresa! 🤯

Que aparecen los warnings!!!

Bueno, solo son advertencias que no son graves pero si son bastante explicitas. ¿Y esto que significa?

Básicamente buscando un poco en la documentación de vite se expone, lo siguiente:

Claramente nos dice:

“Cuando usas o haces uso de módulos de nodejs en el buscador, vite lanzará una advertencia. […] Esto es porque vite no hace el relleno de los módulos de nodejs […]“

Y tanto tiene razón, como suena lógico, no? Al ser una herramienta de tooling para Frontend pues nada de las APIs nativas de Node tienen acceso desde el buscador pues no van a funcionar.

Intente con la opción oficial que se muestra en la advertencia, así como con otra opción dentro de algunas issues de Github pero no funcionaron o quizá yo no entendí bien como poder realizar la implementación:

  • rollup-plugin-polyfill-node
  • rollup-plugin-node-builtins

Finalmente opté por regresar, en el proyecto principal que consumiría dichos módulos, a usar el compilador de typescript y estas subdependencias ya en teoría no deberían fallar porque tendrían tanto su construcción en CJS y ESM pues sería relativamente sencillo poder realizar la tarea.

Y efectivamente, la configuración del build en el proyecto principal quedo de la siguiente forma:

Eliminando a vite de este y como prueba finalmente solo tenia que enlazar el repo de forma local, ejecutar un comando y comprobar su funcionamiento.

Dado esto, resulta que investigando, desde vite ya están trabajando en alguna característica interesante para soportar esta parte desde el lado del servidor o más bien para el modo library, y justo lo mencionan en el siguiente issue:

Y dentro del mismo uno de los Core Team Members, Matias Capeletto A.k.a patak-dev, agrega un comentario al final del issue:

Y dentro de la documentación, se anuncia que justo ya se está trabajando renombrando la actual API Vite Runtime y que ahora será Environment API a partir de la versión 6

Y también buscando un poco, resulta que probablemente las implementaciones pude haberlas realizado mal o con deficiencias, ya que resulta que ambas dependencias ya están en desuso o bien solo las mantiene la comunidad, de acuerdo a lo que se comenta en este artículo de StackOverflow y su referencia a este otro artículo.

Pero de forma esporádica y tienen algunas deficiencias, que a juzgar por el contenido del issue y con lo breve que logré revisar de vistazo, resulta que estaban trabajando en unificar ambas dependencias, aun me falta hacer la revisión completa, pero aquí dejo el issue:

Al final de este artículo vienen los medios por los cuales puedes seguir lo que voy publicando. Espero te haya gustado esta pequeña experiencia y pato-aventura de un día en el desarrollo.

Happy coding 🖖

Referencias