Configuración y Uso de Parcel para Proyectos Web

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:0013:38

Configuración y Uso de Parcel para Proyectos Web

Curso de Introducción a Empaquetadores Web

Clase 13 de 23

Clase 13 / 23

Recursos

¿Cómo optimizar tu proyecto con Parcel sin complicaciones?

Parcel es una herramienta poderosa que te permite optimizar tus proyectos sin necesidad de configuraciones complicadas. A diferencia de Webpack, que requiere un archivo de configuración detallado, Parcel detecta automáticamente los archivos y scripts que necesitas, facilitando así la creación y gestión de proyectos. Prepara tus scripts, procesa tus archivos y todo con menos esfuerzo.

¿Cómo configurar Parcel en un proyecto?

El primer paso para configurar Parcel en tu proyecto es modificar el archivo package.json para indicar el punto de entrada. Cambia la propiedad main por source apuntando a tu archivo index.html dentro de la carpeta src. Esto le indica a Parcel que este será el archivo inicial para analizar y detectar recursos como estilos y scripts.

Cambiar main por source en package.json.
Asegurarse de que source apunte al archivo index.html.

Agrega los siguientes scripts en tu package.json:

"scripts": {
  "start": "parcel serve src/index.html --port 8080",
  "build": "parcel build src/index.html --public-url ./"
}

Esto habilitará una herramienta de desarrollo local y preparará las compilaciones optimizadas.

¿Cómo integrar recursos con Parcel?

Parcel es capaz de reconocer y gestionar múltiples archivos HTML, JavaScript y CSS, procesándolos en un recurso optimizado. Por ejemplo, puedes dividir tu lógica o plantillas en diferentes archivos y Parcel los integrará automáticamente al recurso principal. Para realizar esto, crea una carpeta llamada partials dentro de src y, por ejemplo, un archivo header.html. Use directivas como include dentro de index.html para combinar estos archivos.

<include src="partials/header.html"></include>

Además, puedes añadir un archivo de configuración .posthtmlrc para manejar plugins como posthtml-include, que te permitirá realizar manipulaciones dentro del archivo index.html.

¿Cómo compilar y verificar tu proyecto?

Una vez configurado y listos los scripts, puedes proceder a compilar tu proyecto usando los scripts definidos. En la terminal, ejecuta:

npm run build

Parcel se encargará de detectar cambios necesarios, instalar automáticamente plugins que requieras y generar un compilado en la carpeta dist. Verás archivos optimizados y con hash para una fácil identificación y envío a producción.

Para levantar el entorno de desarrollo local, usa el script:

npm run start

Esto habilitará un servidor local y estará atento a cualquier cambio en tus archivos para actualizar el navegador automáticamente.

¿Cómo desplegar tu proyecto con GitHub Pages?

Con Parcel, desplegar tu proyecto con GitHub Pages es sencillo. Agrega el script de deploy en tu package.json y utiliza el comando gh-page para administrar la publicación.

"scripts": {
  "deploy": "gh-pages -d dist"
}

Instala gh-page:

npm install gh-pages --save-dev

Luego, sube tus cambios al repositorio y utiliza:

npm run deploy

GitHub Pages se encargará de habilitar la visualización de tu proyecto al mundo. No olvides ajustar los settings en tu repositorio para activar esta opción.

Parcel es una herramienta que no solo facilita el desarrollo y manejo de recursos, sino que también agiliza el despliegue de tus proyectos, permitiéndote enfocarte en lo que realmente importa: crear contenido innovador y efectivo.

Diego Andrés Rojas Pinzón

Hace 2 años

Hola no puede hacer este ejercicio, clone el repo del profe, hice un hola mundo sencillo haber si era cosa de dependencias pero nada, cuando ejecuto el npm run start o el npm run build en niguno funciona, no crea la carpeta dist, y no me genera un error como tal, lo unico que medio me solucione y no se como fue instalar el parcel-bundler y luego borralo del archiv, eso me permitio ejecutar pero lo volvi a hacer con algo mas "grande" como este proyecot y no funciono, entonces no se que es.

codigo del package.json
{
  "name": "parcel-project",
  "version": "1.0.0",
  "scripts": {
    "start": "parcel src/index.html",
    "build": "parcel build src/index.html --public-url ./",
    "deploy": "gh-pages -d dist"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "description": "",
  "dependencies": {
    "guess-word-random": "^1.0.1"
  },
  "devDependencies": {
    "parcel": "^2.12.0",
    "posthtml-include": "^2.0.1"
  }
}
```y el resto de codigo :

```js
html:
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <title>Document</title>
    <script type="module" src="index.js" defer></script>
</head>
<body class="flexCenter">
    <main class="flexCenter">
        <h2>Bienvenido al Juego, debes adivinar la palabra</h2>
        <p>Debes usar las Tildes</p>
        <p id="lifes"></p>
        <p id="pistas"></p>
        <input type="text" placeholder="Que palabra soy ?" id="word">
        <button id="button">Confirmar</button>
    </main>
</body>
</html>
``````js
Js:
import { palabra, clues} from './generateWord';

// const { word } = require('guess-word-random');

// const resultado = word();
// const palabra = resultado.laPalabra;
// const clues = resultado.pistas;


console.log({palabra,clues});

let pistas = document.getElementById('pistas');
let input = document.getElementById('word');
let boton = document.getElementById('button');
let vidasDisplay = document.getElementById('lifes');

let vidas = 3

vidasDisplay.innerText = `Tienes ${vidas} vidas`;

let palabraSecreta = palabra;

function elecionPistas(){
    let numeroClue = Math.floor(Math.random()*clues.length);
    pistas.innerText = (`Pista: ${clues[numeroClue]}`)
    clues.splice(numeroClue, 1)
}
elecionPistas()

boton.addEventListener('click' ,confirmar)

function confirmar(){
  let respuesta = input.value;
  input.value = ''
  if(respuesta === palabraSecreta){
    alert('Genial, adivinaste la palabra.')
    location.reload(true);
  }else if( vidas === 1){
    alert(`No adivinaste, la plabra era: ${palabraSecreta}`)
    location.reload(true);
  }else{
    alert('No es la palabra')
    vidas -= 1
    vidasDisplay.innerText = `Tienes ${vidas} vidas`
    elecionPistas()
  }
}
``````js
el uso de una dependencia que cree:
const { word } = require('guess-word-random');

const resultado = word();
export const palabra = resultado.laPalabra;
export const clues = resultado.pistas;

```el resto son estilos pero dudo que falle por eso.
```js
style:*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
body{
    width: 100%;
    height: 100vh;
    background-image: linear-gradient(to right top, #6fdce3, #00bdea, #0099f2, #006ee9, #5c2fc2);
    padding: 10px;
}
.flexCenter{
    display: flex;
    justify-content: center;
    align-items: center;
}
main{
    width: 420px;
    height: 500px;
    border: 1px solid white;
    border-radius: 15px;
    padding: 10px;
    flex-direction: column;
    gap: 30px;
    text-align: center;
    box-shadow: 10px 10px 48px -7px rgba(0,0,0,0.75);
}
h1{
    color: white;
    text-shadow:
        -1px -1px 0 #000, /* Top left */
        1px -1px 0 #000, /* Top right */
        -1px 1px 0 #000, /* Bottom left */
        1px 1px 0 #000; /* Bottom right */
}
input{
    width: 220px;
    height: 40px;
    text-align: center;
    border-radius: 10px;
}
button {
    text-decoration: none;
    position: relative;
    border: 1px solid white;
    font-size: 14px;
    font-family: inherit;
    cursor: pointer;
    color: #fff;
    width: 9em;
    height: 3em;
    line-height: 2em;
    text-align: center;
    background: linear-gradient(90deg, #03a9f4, #f441a5, #ffeb3b, #03a9f4);
    background-size: 300%;
    border-radius: 30px;
    z-index: 1;
  }
  
  button:hover {
    animation: ani 8s linear infinite;
    border: none;
  }
  
  @keyframes ani {
    0% {
      background-position: 0%;
    }
  
    100% {
      background-position: 400%;
    }
  }
  
  button:before {
    content: "";
    position: absolute;
    top: -5px;
    left: -5px;
    right: -5px;
    bottom: -5px;
    z-index: -1;
    background: linear-gradient(90deg, #03a9f4, #f441a5, #ffeb3b, #03a9f4);
    background-size: 400%;
    border-radius: 35px;
    transition: 1s;
    border: 1px solid white;
  }
  
  button:hover::before {
    filter: blur(20px);
  }
  
  button:active {
    background: linear-gradient(32deg, #03a9f4, #f441a5, #ffeb3b, #03a9f4);
  }
  p{
    color: purple;
    font-size: 24px;
    font-weight: bold;
  }

Diego Andrés Rojas Pinzón

Hace 2 años

Volvi despues de gastar casi 8 horas buscando el error o la solucion, siempre me arrojaba punycode deprecated, mire y averigue que era y decian que la version de node tenia un inconveninete con este modulo de punycode, pero era raro por que fuera el proyecto que fuera me generaba error, entonces lo que hice fue pasar de node 22.x.x a node 20.x.x y ya se arreglo, esto me supongo que a medida que salen nuevas versiones pueden surgir errores, entonces trabajare con la version lts

Comentarios (16)16 comentarios

César Augusto Cortés Labrada

Hace 4 años

Cristian Blandon

German Tellez Vanegas

Hace 3 años

Katherin Guerrero

Hector suarez

Andre Huaman Yovera

Kenneth Angulo L

Hace 2 meses

Bryan Castano

Hace un año

Johanna Marcela Orjuela Flórez

Diego Reyes Cabrera

Rodrigo Rojas Candia

Rubén Ernesto Aragón Gil

Mateo Zarate

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

Configuración y Uso de Parcel para Proyectos Web