Ir al contenido principal

Vite

De

 ¿De qué se trata Vite en pocas palabras?

En pocas palabras, Vite es una herramienta de desarrollo frontend ultrarrápida que se centra en una experiencia de desarrollo (DevX) sumamente fluida. Su magia radica en que, a diferencia de los bundlers tradicionales como Webpack, no bundlea tu código en desarrollo. En su lugar, sirve tus módulos JavaScript directamente al navegador usando ES Modules nativos.

Esto significa arranque instantáneo del servidor y actualizaciones de Hot Module Replacement (HMR) casi inmediatas, incluso en proyectos grandes. Para producción, sí utiliza Rollup para generar bundles optimizados.


¿Qué es lo mínimo que tengo que saber de Vite para trabajar en mi proyecto?


Para trabajar eficazmente con Vite en tu proyecto, lo mínimo que necesitas saber se centra en cómo impacta tu flujo de desarrollo y cómo interactúa con tus herramientas.

1. Vite hace que el desarrollo sea increíblemente rápido

  • Arranque Instantáneo: Cuando iniciás tu servidor de desarrollo (generalmente con npm run dev o yarn dev), Vite se inicia casi al instante. No hay un largo tiempo de espera mientras se bundlea todo tu código.

  • Actualizaciones en Caliente (HMR) Veloces: Al guardar cambios en tus archivos, Vite actualiza tu navegador de forma casi instantánea, sin recargar la página completa. Esto es crucial para un flujo de trabajo ágil.

2. Configuración Mínima o Nula

  • "Out-of-the-box": Para muchos proyectos (especialmente si usás React, Vue o Svelte), Vite funciona sin necesidad de configuración adicional.

  • Archivos de Configuración: Si necesitás personalizarlo, la configuración se hace en el archivo vite.config.js (o .ts), donde usás defineConfig y plugins. Por ejemplo, para alias de rutas o reglas de CSS.

3. Manejo de Activos y CSS

  • Importación Directa: Podés importar archivos CSS, imágenes y otros activos directamente en tus archivos JavaScript/JSX/TSX. Vite los procesa automáticamente.

  • Procesadores CSS: Si usás PostCSS, Sass o Less, Vite los detecta y procesa sin mucha configuración extra. Tailwind CSS funciona a la perfección.

4. Comandos Clave

Vas a usar principalmente tres comandos en la línea de comandos de tu proyecto:

  • npm run dev (o yarn dev): Inicia el servidor de desarrollo de Vite para que puedas trabajar en tu aplicación con HMR.

  • npm run build (o yarn build): Genera los archivos optimizados para producción (el "bundle" final) que desplegarás en tu servidor.

  • npm run preview (o yarn preview): Inicia un servidor local para previsualizar la build de producción. Esto es útil para verificar que todo funcione correctamente antes de desplegar.

5. Archivos Estáticos (public folder)

  • Cualquier archivo que pongas en la carpeta public de tu proyecto será servido directamente por el servidor de desarrollo y copiado tal cual a la raíz de tu carpeta de dist (build) en producción. Es ideal para activos estáticos que no necesitan procesamiento (como el index.html, favicon.ico, o imágenes grandes).

En resumen, Vite te da una experiencia de desarrollo sorprendentemente rápida y fluida, requiriendo poca o ninguna configuración para empezar. Solo necesitás conocer los comandos básicos y entender cómo maneja la importación de módulos y activos.


¿Tiene algo que ver Vite con Baseline?


No, Vite y "Baseline" no tienen una relación directa entre sí en el sentido de que uno dependa del otro o sean parte del mismo proyecto o herramienta. Son conceptos que operan en niveles diferentes dentro del ecosistema de desarrollo web.

¿Qué es Vite?

Como ya hemos conversado, Vite es una herramienta de desarrollo y construcción (bundler). Su función principal es servir tu código en el entorno de desarrollo y crear los paquetes optimizados para producción. Vite se ocupa de:

  • Arrancar un servidor de desarrollo rápido.

  • Manejar el Hot Module Replacement (HMR).

  • Procesar JSX, TypeScript, CSS, etc.

  • Optimizar el código para el despliegue.

Vite es una implementación de una herramienta que usas en tu flujo de trabajo de desarrollo.

¿Qué es "Baseline" (Web Platform Baseline)?

"Baseline" (Web Platform Baseline) es una iniciativa y un concepto promovido por Google (y adoptado por otros actores de la industria web, incluyendo Mozilla y Microsoft) para ayudar a los desarrolladores a entender qué características de la plataforma web (HTML, CSS, JavaScript APIs) son ampliamente compatibles y seguras de usar en la mayoría de los navegadores modernos.

En un ecosistema web que evoluciona rápidamente, puede ser difícil saber cuándo una nueva característica de CSS, una API de JavaScript o un elemento HTML está "listo" para el uso en producción sin preocuparse por la compatibilidad. Baseline busca responder a esto definiendo:

  • "Nuevo" (New): Características que han sido lanzadas recientemente y están disponibles en las últimas versiones estables de los principales navegadores.

  • "Baseline disponible" (Baseline Available): Características que han estado disponibles de forma estable en los principales navegadores durante un período de tiempo suficiente (generalmente 6 meses o más, lo que permite que la mayoría de los usuarios hayan actualizado sus navegadores). Estas son las características que puedes usar con confianza.

  • "Baseline universal" (Baseline Universal): Un subconjunto de "Baseline disponible" que incluye características que tienen aún más tiempo de adopción y son compatibles con un porcentaje extremadamente alto de usuarios.

Baseline es más una guía, un estándar de facto o una metodología para la adopción de características web, no una herramienta o librería en sí misma. Puedes encontrar información sobre Baseline en sitios como MDN Web Docs y web.dev.

La Relación (Indirecta)

Aunque no están directamente relacionados, Vite te permite usar características de la "Baseline".

  • Vite como habilitador: Vite te facilita el uso de características de JavaScript modernas (como los módulos ES, que forman parte de la web Baseline) en tu código, al transpilarlas para navegadores más antiguos si es necesario (cuando lo configuras para eso, por ejemplo, con build.target en vite.config.js).

  • Decisiones de desarrollo: Como desarrollador, utilizas la guía "Baseline" para decidir qué características modernas puedes incorporar en tu código (que luego será procesado por Vite) sin preocuparte demasiado por la compatibilidad con navegadores antiguos. Por ejemplo, si una nueva característica CSS de display: grid; está en "Baseline disponible", sabes que puedes usarla y Vite simplemente la pasará tal cual. Si una característica no está en Baseline, quizás necesites pensar en polyfills o alternativas.

En resumen, Vite es una herramienta de desarrollo, mientras que Baseline es una guía para la compatibilidad de características web. Vite te ayuda a construir aplicaciones de forma eficiente, y Baseline te ayuda a tomar decisiones informadas sobre qué características de la web usar en esas aplicaciones.

Etiquetas:

Comentarios

Publicar un comentario

Entradas populares de este blog

Crear proyecto de frontend con Vite, React, Tailwind, Typescript y JSX

De
 ¿Cómo se crea un proyecto exclusivo de frontend con Vite, React, Tailwind, Typescript y JSX? ¡Absolutamente! Entiendo que quieres la guía completa para pasar de cero a tener un proyecto de frontend moderno, vacío y listo para ser llenado con tu código. A continuación, te proporciono un archivo de guía detallada que incluye todos los comandos necesarios para inicializar el proyecto, configurar Tailwind CSS, y los pasos clave para empezar a "poblarlo". Voy a generar un documento Markdown con la guía paso a paso, incluyendo los comandos de terminal y las modificaciones esenciales a los archivos de configuración. Guía: Creación de un Proyecto Frontend Puro (Vite, React, TypeScript, Tailwind) Este documento detalla el proceso para inicializar un proyecto de frontend vacío y optimizado, utilizando Vite como empaquetador, React como librería, TypeScript para tipado y Tailwind CSS para estilizado. 1. Inicialización del Proyecto con Vite Vite es la herramienta más rápida para emp...
Publicar un comentario
Leer más

Tokens V2

De
Tokens: Programme to discover tokens, where there are not. Now available at  https://puszcza.gnu.org.ua/projects/tokens/ This is Version 2, for  version 1, go here . Synopsis: use TokensV2; sub printFile; my @FORMAT = ( ['<Message Date=".*?" Time=".*?" DateTime=".*?" SessionID=".*?"><From>(?:<User FriendlyName=".*?"/>)+</From><To>(?:<User FriendlyName=".*?"/>)+</To><Text(?: Style=".*?")?>.*?</Text></Message>',   sub {     my $fh = $_[1];     my ($d, $t, $f, $s, $T) = $_[0] =~ m|<Message Date="(.*?)" Time="(.*?)" DateTime=".*?" SessionID=".*?">(<From>(?:<User FriendlyName=".*?"/>)+</From>)<To>(?:<User FriendlyName=".*?"/>)+</To><Text(?: Style="(.*?)")?>(.*?)</Text></Message>|;     my $F = join '<br />', ...
Publicar un comentario
Leer más

Perl Net::LDAP::SimpleServer

De
Adaptaciones sobre el módulo LDAP Server para Windows (Strawberry Perl) Lista de adaptaciones (continúa más abajo): - Relajación de condiciones de bind:     - Cuenta principal (principal account)     - Validación de contraseñas Ubicación del archivo: %Strawberry_Perl%\site\lib\net\ldap\SimpleServer\ProtocolHandler.pm CPAN: http://search.cpan.org/~russoz/Net-LDAP-SimpleServer-0.0.17/lib/Net/LDAP/SimpleServer.pm Código: package Net::LDAP::SimpleServer::ProtocolHandler; use strict; use warnings; # ABSTRACT: LDAP protocol handler used with Net::LDAP::SimpleServer our $VERSION = '0.0.17';    # VERSION use Net::LDAP::Server; use base 'Net::LDAP::Server'; use fields qw(store root_dn root_pw allow_anon); use Carp; use Net::LDAP::LDIF; use Net::LDAP::Util qw{canonical_dn}; use Net::LDAP::FilterMatch; use Net::LDAP::Constant (     qw/LDAP_SUCCESS LDAP_AUTH_UNKNOWN LDAP_INVALID_CREDENTIALS/,   ...
Publicar un comentario
Leer más