Empaquetando nuestro proyecto con Rollup

me generaba un error al hacer el build del proyecto, lo solucione agregando al package.json
"type": “module”

De igual manera al colocarlo y querer correr el servidor me generaba otro error en el web-dev-server.config.js para enves de colocar module.exports lo que hice fue cambiarlo por export default { …}

Lo dejo por si alguien tiene ese mismo error.

npm install @web/dev-server -D

Para lograr el npm run build tuve que arreglar unas cosas primero.

1. agregar en el archivo package.json:

 },
  "type": "module"
}

Y cambiar el nombre del archivo de css que está en la ruta src/styles/
styles - por - style

y listo ya tengo el resultado en la carpeta dist

Les recomiendo que agreguen estas opciones en el plugin de html en el archivo rollup.config.js:

html({
  meta: [
    {
      charset: "UTF-8"
    },
    {
      name: "viewport", 
      content: "width=device-width, initial-scale=1.0"
    }
  ]
}),

Esto es para que en su archivo bundle.html cree las dos etiquetas meta de charset y de viewport que son muy importantes en cualquier proyecto web.

rollup -c  |  --config <filename>

Usa un archivo de configuración; si no se especifica buscara por defecto el archivo rollup.config.js

Les comparto mi proyecto y mi repositorio 😎

Solo hice unos pequeños cambios en el CSS y agregué un poco más de productos para que no se sintiera tan vacía la web.
A si quedo mi proyecto:

Excelente video 😎👍