Construir librerías

Con Vite además de poder crear proyectos web, también puedes crear librerías para utilizar en frontend o incluso Node.js. Esto se puede lograr definiendo un archivo en JS o TS como entrada y que a la hora de producción el resultado sea todo lo que este archivo referencio.

Construyendo nuestra librería

Antes de realizar la configuración de Vite vamos a crear nuestra librería, para esto creamos una carpeta que se llame lib, dentro de esta un archivo de JS o TS (main.js) que actúe como la entrada de nuestra librería y escribiremos un código bastante simple como el siguiente:

// main.js
console.log("hola main.js");

Configurando Vite

Ya que nuestro objetivo no es optimizar para web, en la configuración de Vite podemos eliminar las opciones de rollup, en su lugar vamos a decirle que estamos trabajando con una librería con la opción lib.

return {
      build: {
        lib: {},
      },
    };

Opciones para lib

• Lo primero que necesita la opción lib es el punto de entrada, para esto usaremos entry al cual le podemos pasar la función resolve como lo hemos hecho anteriormente. entry: resolve(__dirname, "lib/main.js"),

• Después podemos indicar el nombre por el cual vamos a distribuir nuestra librería con la opción name, en mi caso le pondré demo. name: "demo",

• Finalmente, tendríamos que indicar que tipo de archivo se va a generar con la opción fileName. fileName recibe una función a la cual le entra como parámetro el formato y retorna una cadena de texto con el nombre que le queremos dar al archivo. En mi caso le pondré demo, el formato y por último la extensión de JS. fileName: (format) => `demo.${format}.js`,

return {
      build: {
        lib: {
          entry: resolve(__dirname, "lib/main.js"),
          name: "demo",
          fileName: (format) => `demo.${format}.js`,
        },
      },
    };

Ahora si ejecutamos el comando build podremos ver que en la carpeta dist ya no encontramos archivos de HTML o CSS, por el contrario, encontramos nuestro main.js con formato ES y otro con formato umd. Además, ya puedes distribuir tu librería con npm o usarla en tu propio entorno.

Contribución creada por: Jofay Zhan Segura