Boilerplate de Vite

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