No tienes acceso a esta clase

隆Contin煤a aprendiendo! 脷nete y comienza a potenciar tu carrera

Curso de Vite.js

Curso de Vite.js

Diana Mart铆nez

Diana Mart铆nez

Boilerplate de Vite

5/19
Recursos

Una vez inicias un proyecto con una plantilla de Vite tendr谩s a tu disposici贸n una estructura b谩sica de archivos, que nos facilitara iniciar con el desarrollo. Cada plantilla tiene su propia estructura, pero no te preocupes, despu茅s de todo funcionan de una manera similar.

Archivos b谩sicos de una plantilla de Vite

Un boilerplate de Vite utilizando la plantilla para vanilla JavaScript contiene los siguientes tipos de archivo.

Punto de entrada

Ya que Vite es una herramienta pensada para el frontend, el punto de entrada de nuestra aplicaci贸n es 茅l index.html. Aunque si lo deseas puedes cambiarlo a trav茅s de la configuraci贸n de Vite.

Estilos de nuestro proyecto

El archivostyle.css contiene todos los estilos de la p谩gina. M谩s adelante, cuando ejecutes el proyecto en el navegador, podr谩s ver que Vite convertir谩 este y en general muchos de los archivos, a un paquete de ECMAScript module y de tal manera poder utilizarlo de manera universal.

Im谩genes SVG

Podremos encontrar archivos .svg como vite.svg o javascript.svg, los cuales son im谩genes para la p谩gina, no son necesarias para el funcionamiento de la aplicaci贸n y pueden ser cambiadas o eliminadas en un futuro.

Archivos JavaScript

En nuestros archivos tendremos 茅l main.js, el cual tiene como principal funcionalidad darle la l贸gica a nuestra p谩gina. Adem谩s, tendr谩s counter.js, donde se exporta una funci贸n utilizada en main.js para aumentar el contador de la p谩gina.

Scripts

Si seguimos revisando los archivos, encontraremos 茅l package.json, en donde podremos encontrar el nombre de nuestra aplicaci贸n, la versi贸n, las dependencias y los siguientes scripts.

  • dev: Inicializa el servidor y ejecuta el comando vite.
  • build: Genera nuestro proyecto para producci贸n y lo almacena en el fichero dist. Usa el comando vite build.
  • preview: Una vez tenemos nuestro proyecto para producci贸n se ejecuta el comando vite preview, el cual toma lo que est谩 en el fichero dist y lo muestra en un servidor.

Contribuci贸n creada por: Jofay Zhan Segura

Aportes 6

Preguntas 0

Ordenar por:

驴Quieres ver m谩s aportes, preguntas y respuestas de la comunidad?

o inicia sesi贸n.

Que debemos recodar

  1. Todas las configuraciones las podemos realizar en el archivo vite.config.js
  2. El punto de acceso por defecto es index.html pero podemos cambiar para que sea un .html, .js, .ts
  3. En el archivo punto package.json tenemos los scripts iniciales del proyecto
  • $npm run dev Levanta el servidor en desarrollo
  • $npm run build Genera la carpeta /dist donde est谩n los archivos para prod
  • $npm run preview Levanta un servidor que nos permite ver el proyecto generado en /dist
  1. Cuando vemos el proyecto renderizado en el navegador podemos observar que agrega un parametro que indica en timestamp que representa el momento cuando fue generado.
  • <script type=鈥漨odule鈥 src=鈥/main.js?t=2345676344鈥></script>

    Esto tiene relaci贸n a que los archivos est谩n en el cache el navegador y para renderizar los cambios necesitamos que sean refrescados.

  • Para forzar el limpiado de la cache

    Importante resaltar que puede llegar a ser necesario FORZAR LIMPIAR LA CACHE PARA PODER VER LOS CAMBIOS

    Debemos seguir los pasos

    1. Click en los tres puntos superiores del navegador
    2. 鈥淢谩s herramientas鈥/鈥滺erramientas del desarrollador鈥/鈥滱pplication鈥/Storage鈥
    3. Marcar el check de 鈥淐ache鈥/鈥滳ache storage鈥
    4. Click en 鈥淐lear site data鈥

    O tambi茅n

    1. Click derecho
    2. 鈥滻nspeccionar鈥/鈥滱pplication鈥/Storage鈥
    3. Marcar el check de 鈥淐ache鈥/鈥滳ache storage鈥
    4. Click en 鈥淐lear site data鈥
  • Interesante ver el archivo style.css no es un archivo css normal. C贸mo se hablo anteriormente Vite convierte todos los archivos en un archivo ECMAScript Module para usarlo de manera universal.

Nota: actualmente la ultima version de vite trae un nuevo templete de javascript agregando dos archivos nuevos y una carpeta nueva.
El svg que se menciona en el curso se encuentra en la carpeta public
Esta carpeta public sirve para obtener cualquier archivo disponible a la hora de publicar a prod y por defecto esta carpeta esta siendo expuesta por vite

Me encanta haya dado un tip sobre como eliminar el cache, hay veces que uno se parte la cabeza y simplemente es el cache jajaja

Muy buena informacion de como va funcionando Vite, no sabia lo del timestamp en la cach茅

Esta es la nueva estructura de carpetas

Pueden limpiar el cach茅 yendo a inspeccionar, clic derecho al icono de actualizar y seleccionar, borrar cach茅.