No tienes acceso a esta clase

¡Continúa aprendiendo! Únete y comienza a potenciar tu carrera

Empaquetando un proyecto con parcel

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.

Aportes 10

Preguntas 2

Ordenar por:

¿Quieres ver más aportes, preguntas y respuestas de la comunidad?

Parece que ninguna imagen de la API de platzi está funcionando actualmente

Para los que no se les realice automaticamente la descarga de “posthtml-include”…deberan instalarlo manualmente con–> npm install -D post posthtml-include

El atributo “defer” se utiliza en la etiqueta de script para indicar al navegador que el archivo JavaScript externo debe ser descargado en paralelo con el análisis del documento HTML, pero debe ser ejecutado después de que se complete el análisis del HTML.
.
Cuando un navegador encuentra una etiqueta de script sin el atributo “defer” o “async”, detiene el análisis del HTML, descarga el archivo JavaScript externo y luego lo ejecuta antes de continuar con el análisis del HTML. Esto puede llevar a un retraso en la renderización y la interactividad de la página.
.
Al agregar el atributo “defer” a la etiqueta de script, le estás diciendo al navegador que continúe analizando y renderizando el HTML mientras el archivo JavaScript se descarga en segundo plano. Una vez que se completa la descarga del archivo JavaScript, se ejecuta en el orden en el que aparece en el HTML, pero después de que se haya completado el análisis del HTML.
.
El uso de “defer” es útil cuando deseas asegurarte de que el archivo JavaScript se ejecute después de que se haya cargado todo el contenido HTML y se hayan construido y registrado los elementos necesarios en el DOM. Esto puede ser beneficioso si tu script depende de la presencia de ciertos elementos HTML o si deseas evitar bloquear la renderización inicial de la página.

Profesor necesito ayuda al momento de ejecutar el código me dice falta un Target declared here y le mandare la foto de código. ![](https://static.platzi.com/media/user_upload/upload-716410c2-6ffe-45b7-a8fe-a36552ae1480.png)![](file:///E:/00%20PLATZI/52%20Empaquetadores%20web/img/Screenshot_1.png)![]()
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. ![](https://static.platzi.com/media/user_upload/image-87d315df-714a-4d88-8687-32f04f98fde1.jpg) ```js 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: <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">

Bienvenido al Juego, debes adivinar la palabra

Debes usar las Tildes

<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; } ```
Tuve problemas al desplegar la app. No me reconocía los archivos `.js` ni `.css`, tuve que ir al `index.html`, el que está en la carpeta *<u>dist</u>* y cambiar la ruta, el empaquetado me lo entregó así `"/index.blablabla.js"` y lo cambié a `"index.blablabla.js"`. De esta forma si sirvió cuando lo desplegué, 1. ¿Hay alguna configuración que se deba hacer para que el empaquetado lo realice correctamente? ¿o algo que me perdí e hice mal? Otra cosa: Las imágenes en la Fake API no están funcionando. yo usé otra API, pero bueno, que se yo, revisen eso por ahí a ver si lo pueden solucionar. Saludos
La elección de puertos como el 3000, 8000 o 8080 para probar una web con herramientas como Webpack no está relacionada directamente con Webpack en sí, sino más bien con las convenciones y estándares establecidos en el mundo del desarrollo web. En el desarrollo web, los números de puerto 3000, 8000 y 8080 se consideran comúnmente como puertos utilizados para servir aplicaciones en entornos de desarrollo o pruebas locales. Estos puertos suelen estar menos ocupados y son menos propensos a entrar en conflicto con otros servicios que se ejecutan en el sistema operativo. Aquí hay una breve explicación de cada uno de estos puertos: - Puerto 3000: Es comúnmente utilizado por servidores de aplicaciones web basadas en Node.js. Muchos frameworks y herramientas populares, como Express.js, suelen usar este puerto de forma predeterminada. Es una elección popular debido a que generalmente no está reservado para ningún servicio conocido y no suele haber conflictos. - Puerto 8000: A menudo se utiliza para servir aplicaciones web cuando el puerto 80, el puerto predeterminado para HTTP, está ocupado o se requieren permisos especiales. Este puerto es ampliamente utilizado por servidores de desarrollo, como el servidor web incorporado de Python, para ejecutar aplicaciones web localmente. - Puerto 8080: También es un puerto comúnmente utilizado para probar aplicaciones web localmente. Muchos servidores web de desarrollo y herramientas de desarrollo, como Apache Tomcat y JBoss, suelen usar este puerto de forma predeterminada. En resumen, la elección de estos puertos está basada en convenciones establecidas en el desarrollo web y su uso generalizado para pruebas y desarrollo local. Sin embargo, estos puertos no son una restricción y puedes elegir cualquier puerto disponible en tu sistema para ejecutar tu aplicación web, siempre y cuando no esté siendo utilizado por otro servicio.

Quise experimentar con la instalación automatica de dependencias, así que creé un archivo .babelrc con un preset básico. Lo que me dijo Parcel me sorprendió:

Gran curso Oscar! felicitaciones al Platzi team