No tienes acceso a esta clase

隆Contin煤a aprendiendo! 脷nete y comienza a potenciar tu carrera

Empaquetando un proyecto con webpack

9/23
Recursos

Aportes 9

Preguntas 5

Ordenar por:

驴Quieres ver m谩s aportes, preguntas y respuestas de la comunidad?

o inicia sesi贸n.

npm install webpack-dev-server -D

s铆 les aparece esto:

$ npm run deploy

> webpack@1.0.0 deploy
> gh-pages -d dist

"gh-pages" no se reconoce como un comando interno o externo,
programa o archivo por lotes ejecutable.

Agrega esto en tu terminal y luego da otra vez 鈥渘pm run deploy鈥

npm i gh-pages

Para agregar una descripci贸n a este proyecto:

Hagan esto en html鈥 quiten la etiqueta p y agreguen esto:

<article id="description" class="mt-2">
</article>

Vayan a main.js y agreguen:

const $name = document.querySelector('h1');
const $links = document.getElementById('links');
const $text = document.getElementById('description');

const data = 
{
    name: "tu nombre",
    nickname: "tu apodo",
    description: "la descrici贸n de perfil",
    avatar: "...",
    social: 
    [
        { 
        name: "twitter",
        url: "https://twitter.com/",
        username: "",
        },
        {
        name: "instagram",
        url: "https://instagram.com/",
        username: "",
        },
    ],
    
    links: 
    [
        {
        name: "Portafolio",
        url: "https://example.com/",
        color: "red",
        emoji: "馃摉",
        },
        {
        name: "Redes Sociales",
        url: "https://example.com/",
        color: "yellow",
        emoji: "馃挰",
        },
    ],
    footer: "Made by ? 馃惍",
};

const main = () => {
    let name = document.createTextNode(data?.name);
    let description = document.createTextNode(data?.description);
    let links = data?.links?.map((link) => {
        return `<div class="bg-${link.color}-200 px-4 py-5 w-full flex justify-between">
        <a class="text-sm font-bold text-${link.color}-600 text-center hover:text-${link.color}-800 cursor-pointer"
        href="${link.url}" target="_blank">
        ${link.name}
        </a>
        <span>${link.emoji}</span>
        </div>`;
    }).join('');
    let newItem = document.createElement('section');
    newItem.innerHTML = links;
    $text.appendChild(description)
    $links.appendChild(newItem);
    $name.appendChild(name);
}

main();

El resultado me quedo as铆

const $links = document.getElementById('links');
const $name = document.querySelector('h1');
const $description = document.getElementById('description')
const $img2 = document.getElementById('img2');
const $text = document.getElementById('text')

const data = {
  name: "Misael G贸mez",
  nickname: "mgc",
  tecnologias: '#JavaScript, #npm, #Python, #React',
  description: "Soy un apasionado por la programaci贸n, continuamente estoy mejorando mis habilidades en el desarrollo web, me gusta compartir mis aprendizajes y crear proyectos en el 谩rea de finanzas y mis series favoritas",
  avatar: "https://pbs.twimg.com/profile_images/1534067141519069184/AyYQAI1b_400x400.jpg",
  social: [
    {
      name: "twitter",
      url: "https://twitter.com/MisaelG51069440",
      username: "@MisaelG51069440",
    },
    {
      name: "instagram",
      url: "https://www.instagram.com/misael.gmz.ctl/",
      username: "misael.gmz.ctl",
    },
  ],
  links: [
    {
      name: "platzi user",
      url: "https://platzi.com/p/misael.gomez1623/",
      color: "green",
      emoji: "馃鈥嶐煔",
    },
    {
      name: "sitio web",
      url: "https://misael-gmez-cuautle.super.site/",
      color: "yellow",
      emoji: "馃摉",
    },
    {
      name: "Youtube",
      url: "https://www.youtube.com/channel/UCtIUxzEyQN0DoZVwuuoLVag",
      color: "red",
      emoji: "馃挰",
    },
    {
      name: "Twitter",
      url: "https://twitter.com/MisaelG51069440",
      color: "blue",
      emoji: "馃惁",
    },
    {
      name: "Instagram",
      url: "https://twitter.com/MisaelG51069440",
      color: "purple",
      emoji: "馃摲",
    },
  ],
  footer: "Made with Love on M茅xico",
};

const nombre = () =>{
  let name = document.createTextNode(data?.name);
  let text =document.createTextNode(data?.tecnologias)

  $name.appendChild(name);
  $text.append(text)
}

const desc = () =>{
  let description = document.createTextNode(data?.description);
  $description.appendChild(description)
}

const imagen = () =>{
  let img = document.createElement('img')
  img.className = 'rounded-lg w-48'
  img.src = 'https://pbs.twimg.com/profile_images/1534067141519069184/AyYQAI1b_400x400.jpg'

  $img2.appendChild(img)
}



const main = () => {
  let links = data?.links?.map((link) => {
    return `<div class="bg-${link.color}-200 px-4 py-5 w-full flex justify-between">
          <a class="text-sm font-bold text-${link.color}-600 text-center hover:text-${link.color}-800 cursor-pointer"
            href="${link.url}" target="_blank">
            ${link.name}
          </a>
          <span>${link.emoji}</span>
        </div>`;
  }).join('');
  let newItem = document.createElement("section");
  newItem.innerHTML = links;
  $links.appendChild(newItem);
}

nombre();
imagen();
desc();
main();

Cuando se configura el archivo de webpack es importante tener cuidado con de escribir bien los nombres, a mi me paso que escrib铆 plubic en vez de public, me gener贸 un error y no entend铆a bien a que se deb铆a hasta que despu茅s de un rato lo encontr茅.

A帽ad铆 Whatsapp y TikTok a las redes sociales

Les comparto:

Mi landing page y mi repositorio 馃槈

a los que les falle npm run star鈥> vuelvan a instalar con este comando npm install --save-dev webpack