Cómo crear un proyecto con Parcel desde cero

Curso de Introducción a Empaquetadores Web

Contenido del curso

No sé dónde empezar

Introduccion

Webpack

Parcel

ESBuild

Rollup

Vite

22
Cómo crear tu primer proyecto con Vite
10:02 min

Conclusiones

23
Empaquetadores JavaScript: Ventajas y Desventajas
04:49 min

Tomar examen

Cursos Empresas Blog Live Conf Eventos Precios

0:006:01

Cómo crear un proyecto con Parcel desde cero

Curso de Introducción a Empaquetadores Web

Clase 10 de 23

Clase 10 / 23

Recursos

Configurar Parcel es una de las formas más rápidas de empaquetar un proyecto JavaScript sin pelearte con archivos de configuración. Si vienes de herramientas como Webpack y quieres algo más directo, esta guía te muestra cómo armar un proyecto desde cero usando Parcel y la Fake API de Platzi para mostrar productos tipo e-commerce.

¿Por qué elegir Parcel como empaquetador?

Parcel se diferencia de otros bundlers porque no necesitas crear archivos de configuración para empezar. Detecta el punto de entrada de tu proyecto, analiza las dependencias y prepara todo lo necesario para llevarlo a producción.

Eso no significa que sea mejor o peor que sus competidores. Todos los empaquetadores comparten el mismo objetivo: optimizar tu código para que llegue a los usuarios de la mejor manera posible. La diferencia está en cómo procesan la información, qué plugins ofrecen y qué tan grande es su comunidad.

¿Qué hace Parcel exactamente? Es un empaquetador que detecta automáticamente el punto de entrada de tu proyecto, analiza tus archivos y genera una versión optimizada lista para producción, sin que tengas que escribir configuración manual.

¿Qué ventajas tiene frente a otros bundlers?

La propuesta de Parcel se resume en tres puntos prácticos:

Configuración mínima: no necesitas archivos como webpack.config.js.
Detección automática del punto de entrada y de las dependencias.
Acceso a plugins y recursos para optimizar el código sin fricción.

Cada empaquetador tiene su lógica para sacar ventaja de los archivos, pero Parcel apuesta por la simplicidad desde el primer comando.

¿Cómo iniciar un proyecto con Parcel paso a paso?

Antes de instalar Parcel, necesitas preparar la base del proyecto desde la terminal [01:30]. Este flujo se repite en casi todos los proyectos modernos, así que vale la pena memorizarlo.

Los pasos iniciales son:

Crear la carpeta del proyecto con mkdir parcel.
Entrar a la carpeta y ejecutar git init para iniciar el control de versiones.
Inicializar el gestor de paquetes con npm init -y.
Abrir el editor con code . para empezar a trabajar en Visual Studio Code.

Aunque npm init -y salta los campos de descripción y autor, conviene completarlos después. Esos detalles del package.json describen tu proyecto, su versión y su propósito, y son clave cuando trabajas en equipo o publicas tu código.

¿Qué es package.json? Es el archivo que define la configuración de tu proyecto en Node: nombre, versión, dependencias y scripts. Funciona como la identidad de tu aplicación dentro del ecosistema npm.

¿Cómo estructurar las carpetas del proyecto?

Una vez abierto el editor, crea la estructura mínima dentro de una carpeta llamada src, que aloja el código fuente [03:30]:

src/index.js para la lógica de la aplicación.
src/index.html como punto de entrada del navegador.
Una carpeta de estilos para los archivos CSS.

Cada empaquetador maneja su propia nomenclatura. Algunos esperan una carpeta public, otros usan dist o nombres distintos para los scripts de desarrollo y compilado. Por eso siempre conviene revisar la documentación oficial del bundler que estés usando.

¿Cómo instalar Parcel y prepararlo para producción?

Con la estructura lista, instala Parcel como dependencia de desarrollo desde la terminal:

bash npm install -D parcel

La bandera -D indica que Parcel solo se usa durante el desarrollo y la compilación, no en el entorno final del usuario. La instalación puede tardar unos segundos mientras npm descarga el paquete y sus dependencias.

Después podrás usar los comandos de Parcel para levantar un servidor local, generar el build optimizado y desplegar el resultado en servicios como GitHub Pages.

¿Qué proyecto vas a construir con Parcel?

La práctica usa la Fake API de Platzi, una API pensada para aprender y experimentar con datos tipo e-commerce. Vas a construir un sitio que muestra productos y luego lo optimizas con Parcel antes de publicarlo.

Este tipo de proyectos suma a tu portafolio. Si los personalizas, los mejoras o los adaptas a tu estilo, te ayudan a conectarte con oportunidades en el ecosistema laboral. ¿Ya tienes idea de cómo lo vas a personalizar? Cuéntalo en los comentarios.

Introduccion

Empaquetadores Web: Herramientas y Evolución para Desarrolladores

Qué es un empaquetador de módulos JS

Webpack, Parcel, Rollup y Vite comparados

Qué hacen los empaquetadores de módulos en JS

Webpack

Configura tu primer proyecto con Webpack

webpack.config.js con plugins esenciales

Creación de una Landing Page con JavaScript y Tailwind CSS

Manipulación del DOM con map y template literals

Despliegue en GitHub Pages con Webpack

Parcel

Cómo crear un proyecto con Parcel desde cero

Estructura base de un proyecto con Fake Store API

Lógica de API con Vanilla JS y Parcel

Configuración y Uso de Parcel para Proyectos Web

ESBuild

Configurar Svelte con React y TypeScript

Estructura de un proyecto React con TypeScript

useState y useCallback en un contador React

Servidor local con esbuild desde cero

Rollup

Configura Rollup con plugins desde cero

Configurar plugins de Rollup para producción

Manipulación del DOM sin frameworks con Rollup

Servidor local en Rollup con Web Dev Server

Vite

Cómo crear tu primer proyecto con Vite

Conclusiones

Empaquetadores JavaScript: Ventajas y Desventajas

Cómo crear un proyecto con Parcel desde cero