🧰 Parcel · Estudio ← Índice Qué es Características Casos de uso Script Casos reales Referencia

Estudio de Parcel

Bundling ⭐ 42k stars
Empaquetador de aplicaciones web rápido, con cero configuración.

🤖 Skill de implementación: frontend-desarrollo (regla: solo catálogo de las 66 · versiones por ERR/MEJ)

1 · Características

2 · Casos de uso

3 · Script minimalista

Instalación: npm i -D parcel

// npx parcel index.html   → empaqueta sin configurar nada

4 · Casos de uso (implementación real)

Dos casos de uso comunes implementados con esta librería.

1. Build de una app

Empaqueta HTML+JS+CSS sin configuración.

# index.html referencia a index.js
# <script src="./index.js"></script>
npm i -D parcel
npx parcel build index.html   # genera dist/
🔁 Cómo funciona: Parcel detecta las dependencias desde el HTML y genera el bundle de producción.

2. Assets y HMR en dev

Servidor dev con recarga en caliente e imágenes.

import logo from './logo.png';
const img = document.createElement('img'); img.src = logo;
document.body.appendChild(img);

# Terminal: npx parcel index.html   → http://localhost:1234 (HMR)
🔁 Cómo funciona: Parcel trata imágenes/CSS como módulos e inyecta su URL; HMR recarga al editar.

5 · Referencia

CategoríaBundling
Stars (GitHub)⭐ 42k
Sitio oficialhttps://parceljs.org/
GitHubhttps://github.com/parcel-bundler/parcel
Instalaciónnpm i -D parcel
RelacionadasWebpack · Rollup
📦 Regla de librerías (local primero): revisar C:\Users\TUF\Documents\librerías\local\ antes de descargar. Volver al índice de los 66 estudios.