ManzDev
Perfil de Manz Dashboard de actividad
HTML5 Etiquetas HTML
CSS CSS vanilla
PostCSS Transformador CSS
Javascript Javascript ES2020+
NPM Node Package Manager
WebComponents Componentes web
Terminal Terminal de GNU/Linux
VueJS Framework VueJS 3
Automatizadores Empaquetadores Javascript
Youtube Canal de Youtube
Twitch Canal de Twitch
Telegram Canal de Telegram
Discord Servidor de Discord

Guía tutorial inicial de Vite

Vite se define como una herramienta de frontend que te ayudará a crear tus proyectos de forma agnóstica (sin atarte a ningún framework concreto) y que su desarrollo y construcción final sea lo más sencilla posible. Está desarrollada por Evan You, el creador de Vue. Actualmente, Vite soporta tanto proyectos vanilla (sin utilizar frameworks), como proyectos utilizando Vue, React, Preact o Lit-element (tanto en versión Javascript, como Typescript).

Creación de un proyecto con Vite

Para comenzar, simplemente necesitamos tener instalado NodeJS. Utilizaremos npm para comenzar el proyecto. Escribimos desde una terminal:

$ npm init @vitejs/app demo-project

Need to install the following packages:
  @vitejs/create-app
Ok to proceed? (y) y

Scaffolding project in /home/manz/github/demo-project...

Done.

El comando npm init @vitejs/app hará toda la magia por nosotros. En nuestro ejemplo, demo-project sería el nombre de la carpeta del proyecto, por lo que este comando ya se encargará de crear la carpeta, ni siquiera tendremos que crearla nosotros.

Se nos advertirá que es necesario instalar el paquete @vitejs/create-app, que es el asistente encargado de crear la aplicación web. Al responder afirmativamente, nos aparecerá un menú para seleccionar que plantilla queremos utilizar:

Plantilla Descripción URL
vanilla Proyecto Javascript vanilla, sin frameworks. GitHub
vue Proyecto Javascript con el framework Vue. Versión en Javascript. GitHub
vue-ts Proyecto Javascript con el framework Vue. Versión en Typescript. GitHub
react Proyecto Javascript con la librería React. Versión en Javascript. GitHub
react-ts Proyecto Javascript con la librería React. Versión en Typescript. GitHub
preact Proyecto Javascript con la librería Preact. Versión en Javascript. GitHub
preact-ts Proyecto Javascript con la librería Preact. Versión en Typescript. GitHub
lit-element Proyecto Javascript con la librería LitElement. Versión en Javascript. GitHub
lit-element-ts Proyecto Javascript con la librería LitElement. Versión en Typescript. GitHub

Es posible indicar un parámetro opcional --template para especificar directamente la plantilla a utilizar sin que nos salte el asistente:

# Utilizas NPM 7 o superior
$ npm init @vitejs/app demo-project -- --template vue

# Utilizas NPM 6 o anterior
$ npm init @vitejs/app demo-project --template vue

Una vez hecho el proceso, comprobaremos que la tarea de creación del proyecto es prácticamente instantánea. Esto ocurre así porque Vite no realiza el proceso de instalación de paquetes automáticamente, por lo que tendremos que hacerlos nosotros manualmente:

$ cd demo-project

$ npm install

Con esto ya tendremos el proyecto listo para arrancarlo con el script npm run dev y comenzar a desarrollar. Ten en cuenta que en todos los proyectos que generes tendrás un script dev que lanza el modo de desarrollo de Vite y, por otro lado, tendrás un script build que lanza el modo de producción de Vite, que es el que genera la subida en la carpeta dist, que es la que irá a producción.



Manz
Publicado por Manz

Docente, divulgador informático y Streamer de código. Amante del CSS y de la plataforma web en general. Autor de Emezeta.com tiempo atrás. Ha trabajado como profesor en la Universidad de La Laguna y es director del curso de Programación web FullStack y FrontEnd de EOI en Tenerife. En sus ratos libres, busca GIF de gatos en Internet.