Boilerplate de Vite

Contenido del curso

Cursos Empresas Blog Live Conf Eventos Precios

0:007:22

Boilerplate de Vite

Curso de Vite.js

Clase 5 de 19

Clase 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

Mitchell Contreras

Hace 4 años

Que debemos recodar

Todas las configuraciones las podemos realizar en el archivo ****
El punto de acceso por defecto es index.html pero podemos cambiar para que sea un .html, .js, .ts
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

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.

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

Boilerplate de Vite

Progreso del curso

Introducción

Setup inicial

Estilos CSS

Archivos estáticos

Configuración

Construir para producción

Frameworks

Cierre del curso

Recursos

Recursos