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

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 freelance. Autor de Emezeta.com, es profesor en la Universidad de La Laguna y dirige el curso de Programación web FullStack y Diseño web FrontEnd de EOI en Tenerife (Canarias). En sus ratos libres, busca GIF de gatos en Internet.