No tienes acceso a esta clase

¡Continúa aprendiendo! Únete y comienza a potenciar tu carrera

Prepárate para tu próximo empleo comprando hoy a precio especial

Antes: $249

Currency
$209
Suscríbete

Termina en:

7 Días
19 Hrs
29 Min
35 Seg
Curso de Vite.js

Curso de Vite.js

Diana Martínez

Diana Martínez

Construir librerías

16/19
Recursos

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

Aportes 4

Preguntas 1

Ordenar por:

¿Quieres ver más aportes, preguntas y respuestas de la comunidad?

Dejo el codigo utilizado durante la clase:

import { defineConfig, loadEnv } from 'vite'
import { resolve, dirname, format } from 'path'
import { fileURLToPath } from 'url'

const _dirname = typeof __dirname !== 'undefined'
  ? __dirname
  : dirname(fileURLToPath(import.meta.url))
/** @type {import('vite').UserConfig} */
export default defineConfig(({command, mode})=>{
    const env = loadEnv(mode, process.cwd());

    const port = env.VITE_PORT;

    console.log(command, mode)
  
    if (mode === "development") {
        console.log("modo desarrollo")
        return {
            server:{
                port
            }
        }
    } else {
        console.log("modo produccion")
        return {
            build:{
               lib: {
                entry: resolve(_dirname, 'lib', 'main.js'),
                name: 'demo',
                fileName: (format)=>`demo.${format}.js`
               }
            }
        }
    }
})


ojo 👀

No confundan el arrow function

() => {

}

Con array function o métodos.

Espectacular lo que fácil que es empaquetar todo en una libreria y justo lo que estaba necesitando ahora.

Estoy creando una librería en react + typescript + vite y para estas tecnologías lo que hice fue ejecutar: `npm install --save-dev @types/node` para que me funcionara resolve( ) ... Nota: Estar pendiente de la ruta que sé indicar en `entry: resolve( )`