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,
Convierte tus certificados en títulos universitarios en USA
Antes: $249
Paga en 4 cuotas sin intereses
Termina en:
Empaquetando un proyecto con parcel
13/23Aportes 9
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?