Configuración y Uso de Parcel para Proyectos Web

Clase 13 de 23 • Curso de Introducción a Empaquetadores Web

Contenido del curso

Introduccion

Webpack

Parcel

ESBuild

Rollup

Vite

22
Configuración y uso de herramientas de empaquetado en JavaScript
10:02 min

Conclusiones

23
Empaquetadores JavaScript: Ventajas y Desventajas
04:49 min

Tomar examen

Resumen

¿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

student•

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

student•

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

Configuración y Uso de Parcel para Proyectos Web

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