Creo que me quedaré con vite para proyectos medianos / grandes, y Rollup se me hizo interesante para optimizar proyectos con vanilla JavaScript
Introduccion
Empaquetadores Web: Herramientas y Evolución para Desarrolladores
Módulos y empaquetadores en JavaScript: fundamentos esenciales
Empaquetadores de Módulos en JavaScript: Webpack, Parcel, Sbuild y Más
Empaquetadores de Módulos JavaScript: Webpack y Alternativas
Webpack
Configuración y Uso de Webpack para Proyectos Web
Configuración de Webpack para Aplicación Web Dinámica
Creación de una Landing Page con JavaScript y Tailwind CSS
Manipulación del DOM con JavaScript: Creación de Funciones y Templates
Configuración y despliegue de aplicaciones web con Webpack y GitHub Pages
Parcel
Creación de Proyectos Web con Parcel y Fake API de Platzi
Creación de una Aplicación Web con Fake API y Parcel
Creación de SPA con Vanilla JavaScript y Parcel
Configuración y Uso de Parcel para Proyectos Web
ESBuild
Configuración de Proyectos React y TypeScript con SBuild
Desarrollo de Aplicaciones con React y TypeScript: Primeros Pasos
Integración de UseState y UseCallback en React con SBuild
Configuración de Servidor Local con sbuild en JavaScript
Rollup
Configuración de Proyectos con Roloop y Plugins Avanzados
Configuración de Plugins en Rollup para Optimización de Proyectos
Construcción de Aplicación Web con JavaScript y Fake API
Instalación y configuración de DevServer con Rollup
Vite
Configuración y uso de herramientas de empaquetado en JavaScript
Conclusiones
Empaquetadores JavaScript: Ventajas y Desventajas
No tienes acceso a esta clase
¡Continúa aprendiendo! Únete y comienza a potenciar tu carrera
Si ya tienes una cuenta,
Configuración y uso de herramientas de empaquetado en JavaScript
22/23Recursos
¿Qué herramienta podría revolucionar el entorno de empaquetadores?
Platzi ofrece educación profesional efectiva, y uno de sus recursos trata sobre una poderosa herramienta para empaquetadores. Se trata de un sistema que combina tecnología avanzada y ofrece una serie de recursos automatizados listos para usar. Esta herramienta no solo proporciona un rendimiento óptimo en la optimización de proyectos, sino que también ha generado una norma que mejora nuestros desarrollos, siendo adoptada por varios proyectos importantes en producción.
¿Cuáles son las tecnologías y opciones que se integran?
La herramienta permite trabajar con un entorno local de desarrollo, frameworks y librerías modernas, y es compatible con una API totalmente funcional. Lo mejor es que ofrece soporte para plugins sin importar el framework usado, siempre que sea JavaScript. En sus opciones, podemos elegir entre:
- Manila: JavaScript puro.
- Frameworks populares: Vue, React, Preact (versión más ligera de React), LitElement y Svelte.
- TypeScript: Opciones adaptadas tanto para JavaScript como TypeScript.
¿Cómo iniciar un proyecto con esta herramienta?
Iniciar un proyecto es sencillo gracias a los comandos que simplifican la configuración inicial. Aquí te dejamos los pasos clave:
- Terminal: Copia el comando básico en tu terminal para iniciar un nuevo proyecto.
- Selección del proyecto: Decide el framework o lenguaje que usarás (por ejemplo, Svelte con TypeScript).
- Configuración del proyecto: Nombrar el proyecto y esperar la instalación de las dependencias.
Con todo listo, se puede abrir en Visual Studio Code donde verás una estructura de archivos completa, listos para personalizar y empezar el desarrollo.
¿Qué contiene la estructura del proyecto?
La estructura del proyecto está preconfigurada para maximizar la eficiencia durante el ciclo de vida del desarrollo. Aquí se destacan algunos elementos clave:
- Visual Studio Code: Configuraciones apropiadas.
- No Modules: Gestión adecuada de las dependencias.
- Archivos base: Main.ts, variaciones de entorno, y el archivo de aplicación de Svelte.
- Scripts y configuraciones: Ya configurados en el archivo package.json.
¿Cómo ejecutar y compilar el proyecto?
Una vez listo el proyecto, puedes ejecutarlo e iniciar el entorno de desarrollo local utilizando:
npm run dev
Este comando lanzará la aplicación en el puerto 3000, accesible desde localhost. Al ejecutar:
npm run build
La herramienta compilará la aplicación, generando archivos esenciales para la puesta en producción, incluyendo archivos minificados y optimizados.
¿Por qué es importante elegir bien las herramientas?
Usar la herramienta correcta hace una gran diferencia. Antes de construir, se recomienda leer la documentación y explorar plugins y mejoras. La elección de tecnología puede influir en:
- La eficiencia del proceso de desarrollo.
- La capacidad de escalado del proyecto.
- La integración con otras herramientas y recursos externos.
Explora y experimenta para encontrar la fórmula ideal que te permitirá llevar tus proyectos al siguiente nivel. ¡Sigue motivado y nunca dejes de aprender!
Aportes 11
Preguntas 1
Ordenar por:
Que impresionante la facilidad que da Vite, Definitivamente seguiré con el curso del mismo
Vite está muy bueno por la facilidad de uso que tiene y por su velocidad al completar procesos
Desde que conocí Vite con el curso de Diana Martínez me encantó su facilidad y rapidez. Lo amo
Me encanta Vite
Me gusta Vite, aunque la mayoria de los trabajos piden conocimiento en webpack, quizas esto cambie con el tiempo.
Para que les aparezca en gh-pages recomiendo:
agregar esto en vite.config.ts: base: ‘/nombre-repositorio/’,
quedaria así:
import { defineConfig } from 'vite'
import { svelte } from '@sveltejs/vite-plugin-svelte'
// https://vitejs.dev/config/
export default defineConfig({
base: '/nombre-de-su-repositorio-de-github/',
plugins: [svelte()],
})
y modificar un poco el package.json así:
"deploy": "vite build && gh-pages -d dist",
"predeploy": "rm -rf dist"
ya el resto lo conocen para publicar en gh-pages… good luck!
Vite usa rollup y ESBuild por detrás, de ahí su poder! 😅
Al parecer todos dicen Vite entonces…
Vite ⚡
¿Quieres ver más aportes, preguntas y respuestas de la comunidad?