Introduccion
Bienvenida al curso de Empaquetadores Web
¿Qué es un empaquetador de módulos de JavaScript?
Empaquetadores de módulos más populares
¿Por qué necesitamos un empaquetador de módulos?
Webpack
Primeros pasos en Webpack
Configuración de webpack
Proyecto a empaquetar: Tu propio árbol de links
Lógica del árbol de links tipo linktree
Empaquetando un proyecto con webpack
Parcel
Primeros pasos en Parcel
Proyecto a empaquetar: single page con Vanilla JavaScript
Lógica del proyecto single page
Empaquetando un proyecto con parcel
ESBuild
Primeros pasos en ESBuild
Proyecto a empaquetar: contador de React
Empaquetando nuestro proyecto con ESBuild
Configuración de ESBuild serve
Rollup
Primeros pasos en Rollup
Configurando plugins de Rollup
Proyecto a empaquetar: Fake API
Empaquetando nuestro proyecto con Rollup
Vite
Empaquetando un proyecto con Vite
Conclusiones
Ventajas y Desventajas de los empaquetadores
No tienes acceso a esta clase
¡Continúa aprendiendo! Únete y comienza a potenciar tu carrera
Si ya tienes una cuenta,
Empaquetando un proyecto con parcel
13/23¿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
mainporsourceenpackage.json. - Asegurarse de que
sourceapunte al archivoindex.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
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.
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; } ```
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
¿Quieres ver más aportes, preguntas y respuestas de la comunidad?