Qué es y cómo empezar con Vite

Vite es una herramienta de desarrollo frontend que se ha ganado rápidamente la atención de los desarrolladores por su velocidad y facilidad de uso.

Creada por Evan You, el mismo desarrollador detrás de Vue.js, Vite está diseñada para proporcionar un entorno de desarrollo ultrarrápido y una experiencia de compilación adecuada para proyectos web modernos.

Instalación y Configuración Inicial

Para empezar a usar Vite, necesitas Nodejs y NPM (Node Package Manager). Si no sabes lo que son, o quieres aprender más, te dejo por aquí estos dos cursitos 👇.

Curso Nodejs

Aprende a utilizar el gestor de paquetes Nodejs

Curso NPM

Aprende a utilizar el gestor de paquetes NPM

Crear un nuevo proyecto con Vite

La forma más sencilla de comenzar un nuevo proyecto con Vite es utilizando la herramienta de creación de proyectos que proporciona. Abrimos una terminal y ejecutamos el siguiente comando:

npm create vite@latest

Esto iniciará un asistente que te guiará a través del proceso de configuración del proyecto. Te pedirá que selecciones el nombre del proyecto y el framework que deseas usar (por ejemplo, Vanilla, Vue, React, Svelte, etc.).

Ejecutar el servidor de desarrollo

Para iniciar el servidor de desarrollo, utiliza el siguiente comando:

npm run dev

Este comando inicia un servidor de desarrollo y abre tu aplicación en el navegador, generalmente en http://localhost:5173.

Estructura del proyecto

La estructura básica de un proyecto Vite es la siguiente:

nombre-del-proyecto/
├── index.html
├── package.json
├── public/
├── src/
│   ├── assets/
│   ├── components/
│   └── main.js
└── vite.config.js

Aquí tienes la enumeración convertida a una tabla:

Primer archivo Vite

En src/main.js, puedes importar y utilizar módulos de ES de la siguiente manera:

import './style.css';
import javascriptLogo from './javascript.svg';
import { setupCounter } from './counter.js';

document.querySelector('#app').innerHTML = `
  <div>
    <a href="https://vitejs.dev" target="_blank">
      <img src="/vite.svg" class="logo" alt="Vite logo" />
    </a>
    <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript" target="_blank">
      <img src="${javascriptLogo}" class="logo vanilla" alt="JavaScript logo" />
    </a>
    <h1>Hello Vite!</h1>
    <div class="card">
      <button id="counter" type="button"></button>
    </div>
    <p class="read-the-docs">
      Click on the Vite logo to learn more
    </p>
  </div>
`;

setupCounter(document.querySelector('#counter'));

En este ejemplo, se importa un archivo CSS, un logo en SVG y un módulo JavaScript para configurar un contador.

Características Avanzadas

Configuración

El archivo vite.config.js permite una configuración detallada de Vite. Puedes personalizar el comportamiento del servidor de desarrollo, el build, y añadir plugins de la siguiente manera:

import { defineConfig } from 'vite';

export default defineConfig({
  server: {
    port: 3000,
  },
  build: {
    outDir: 'dist',
  },
  plugins: [],
});

Plugins

Vite tiene un ecosistema de plugins robusto que se puede utilizar para extender su funcionalidad. Aquí hay un ejemplo de cómo añadir un plugin para Vue:

import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';

export default defineConfig({
  plugins: [vue()],
});

Integración con TypeScript

Vite soporta TypeScript de manera nativa. Para utilizar TypeScript, simplemente renombra tus archivos de .js a .ts y asegúrate de tener typescript instalado en tu proyecto:

También puedes añadir un archivo tsconfig.json en la raíz de tu proyecto para configurar el compilador TypeScript.

CSS y Preprocesadores

Vite soporta CSS y preprocesadores como Sass, Less y Stylus. Aquí tienes un ejemplo de cómo configurar Sass:

npm install sass

Luego, en tus archivos de estilo, puedes utilizar la sintaxis de Sass:

/* src/style.scss */
$color: purple;

body {
  color: $color;
}

En tu archivo main.js:

import './style.scss';