Fundamentos de Vite, esbuild, SWC y Rollup
Conozca los bundlers habituales (Vite, esbuild, SWC y Rollup) y cómo interactúan con los proyectos de TypeScript.
Fundamentos de Vite, esbuild, SWC y Rollup es una lección gratuita de TypeScript Academy en CoddyKit. Esta es la lección 2 de 3. Puedes leer la lección completa abajo gratuitamente — luego la practicas en el navegador con un editor de código integrado y un tutor de IA 24/7. Forma parte de la ruta de aprendizaje de TypeScript Academy, y tu progreso se sincroniza en la web y la app de CoddyKit. El curso de TypeScript Academy incluye 3 lecciones en total.
Introducción
Objetivo: Explore bundlers populares: Vite, esbuild, SWC y Rollup. Cada uno ofrece una combinación particular de velocidad y flexibilidad.
Vite
Vite: servidor de desarrollo instantáneo que utiliza ESM, HMR rápido y compilaciones de producción impulsadas por Rollup.
// package.json
{
"scripts": {
"dev": "vite",
"build": "vite build"
}
}esbuild
esbuild: bundler extremadamente rápido escrito en Go. Ideal para crear prototipos y para proyectos de JS/TS.
// Command
npx esbuild src/index.ts --bundle --outfile=out.jsSWC
SWC: compilador basado en Rust para TS/JS. Se utiliza a menudo en Next.js por su velocidad.
// swc config (.swcrc)
{
"jsc": {
"parser": { "syntax": "typescript" },
"target": "es2020"
}
}Rollup
Rollup: bundler flexible con una potente eliminación de código no utilizado (tree-shaking). Vite utiliza Rollup internamente para las compilaciones.
// rollup.config.js
import typescript from "@rollup/plugin-typescript";
export default {
input: "src/index.ts",
output: { file: "bundle.js", format: "cjs" },
plugins: [typescript()]
};Elegir un bundler
Elección: Vite para una buena experiencia de desarrollo, esbuild para obtener velocidad, SWC para la compilación basada en Rust y Rollup para tener control. Todos se integran fácilmente con TS.
Pregunta
Comprobación rápida: ¿Qué bundler utiliza módulos ES nativos para ofrecer un servidor de desarrollo rápido?
Repaso
Repaso: Vite destaca por la velocidad de ESM, esbuild por la velocidad de Go, SWC por la velocidad de Rust y Rollup por su flexibilidad. Elija según las necesidades del proyecto.
Preguntas frecuentes
¿La lección «Fundamentos de Vite, esbuild, SWC y Rollup» es gratis?
Sí — el texto completo de «Fundamentos de Vite, esbuild, SWC y Rollup» es gratis para leer aquí en la web. Para practicarla de forma interactiva (editor de código integrado y tutor de IA 24/7) y desbloquear el resto del curso de TypeScript Academy, actualiza a CoddyKit PRO. El curso de TypeScript Academy incluye 3 lecciones en total.
¿Qué aprenderé en «Fundamentos de Vite, esbuild, SWC y Rollup»?
Conozca los bundlers habituales (Vite, esbuild, SWC y Rollup) y cómo interactúan con los proyectos de TypeScript. Practicas TypeScript Academy con código real que ejecutas directamente en el navegador, y un tutor de IA 24/7 responde tus preguntas mientras trabajas en la lección.
¿Necesito experiencia previa para empezar TypeScript Academy?
No se requiere experiencia previa. TypeScript Academy en CoddyKit está estructurado para principiantes hasta estudiantes avanzados, así que puedes empezar aquí o desde el inicio y avanzar a tu ritmo. Esta es la lección 2 de 3.
¿Cuánto tiempo toma la lección «Fundamentos de Vite, esbuild, SWC y Rollup»?
La mayoría de las lecciones de CoddyKit toman alrededor de 5–10 minutos. Cada una es compacta e interactiva, así que avanzas constantemente y retomas exactamente por donde dejaste en la web y la app.
¿Puedo escribir y ejecutar código en esta lección de TypeScript Academy?
Sí. Cada lección de TypeScript Academy incluye un editor de código integrado, así que escribes y ejecutas código real directamente en tu navegador y obtienes retroalimentación instantánea de IA — sin configuración local necesaria.
Todas las lecciones de este curso
- Emisión de tsc frente a noEmit y bundlers
- Fundamentos de Vite, esbuild, SWC y Rollup
- Declaraciones, mapas de origen y exportaciones de tipos