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

Aportes 4

Preguntas 0

Ordenar por:

Los aportes, preguntas y respuestas son vitales para aprender en comunidad. Regístrate o inicia sesión para participar.

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=”module” 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. “Más herramientas”/”Herramientas del desarrollador”/”Application”/Storage”
    3. Marcar el check de “Cache”/”Cache storage”
    4. Click en “Clear site data”

    O también

    1. Click derecho
    2. ”Inspeccionar”/”Application”/Storage”
    3. Marcar el check de “Cache”/”Cache storage”
    4. Click en “Clear 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.

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

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

Esta es la nueva estructura de carpetas