Construir librerías

Curso de Vite.js

Introducción

¿Qué es Vite?

Historia del Ecosistema de JavaScript

Características de Vite

Setup inicial

¿Cómo instalar Vite?

Boilerplate de Vite

Estilos CSS

Importar CSS

Pre-procesadores CSS

CSS Modules

Archivos estáticos

Importar imágenes

Importar JSON

Importación global

Configuración

Uso con TypeScript

Vite Config

Construir para producción

Variables de entorno y modos

Sitios multi-página

Construir librerías

Frameworks

Soporte para React

Soporte para Vue

Cierre del curso

Despedida

No tienes acceso a esta clase

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

Si ya tienes una cuenta,

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?

Max Andy Diaz Neyra

hace 2 años

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`
               }
            }
        }
    }
})

Salvador Santander Gutiérrez

hace 2 años

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

Rubén Ernesto Aragón Gil

hace 2 años

ojo 👀

No confundan el arrow function

() => {

}

Con array function o métodos.

Carlos Waldo Rojas

hace un año

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( )`