Servidor local en Rollup con Web Dev Server
Contenido del curso
Webpack
Parcel
ESBuild
Rollup
Vite
Conclusiones
Servidor local en Rollup con Web Dev Server
Servidor local en Rollup con Web Dev Server
Contenido del curso
Angel Eduardo Quispe Pomajulca
Leonardo Rodriguez
Santiago Andres Alvarez Cuadros
Bryan Figueroa
Donovan RM
ANA RAMIREZ
Carlos Mario
Kenneth Angulo L
Uriel Solis Salinas
Andres Badillo
Kenneth Angulo L
Johanna Marcela Orjuela Flórez
Humberto Delgado
Leonardo Fonseca
Humberto Delgado
Guillermo Prituluk
Diego Iberri Ramírez
Rubén Ernesto Aragón Gil
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.
En package.json si se agrega la propiedad: "type": “module” sirve para que corra el "npm run build", pero no sirve para que corra "npm run start", otra solución es cambiar la extensión a (.cjs) y realizar los cambios en el archivo directamente y en script de package.json dejar nombre del archivo como: web-de-server.config.cjs, de esa manera se pueden ejecutar los 2 scripts
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.
npm install @web/dev-server -D
Para lograr el npm run build tuve que arreglar unas cosas primero.
}, "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
gracias!!
rollup -c | --config <filename>
Usa un archivo de configuración; si no se especifica buscara por defecto el archivo rollup.config.js
¿Es posible autogenerar el archivo HTML final?
Sí, y de hecho es una de las mejores prácticas en el desarrollo web moderno para evitar errores manuales. En lugar de crear un index.html estático y adivinar los nombres de los archivos generados (que a menudo cambian si usas hashes en los nombres para evitar el caché del navegador), puedes usar un plugin de HTML. Este plugin actúa como un molde dinámico: toma tu código empaquetado final, como bundle.js y bundle.css, y los inyecta automáticamente en un archivo HTML nuevo dentro de tu carpeta de salida. Además, puedes personalizar este proceso para agregar etiquetas <meta> para SEO, cambiar el <title> dinámicamente o inyectar scripts de analíticas, todo directamente desde tu configuración de JavaScript.
Alguien sabe por qué me sale este error al momento de querer hacer build? .
> rollup@1.0.0 build > rollup -c node:internal/modules/cjs/loader:903 throw err; ^ Error: Cannot find module 'node:process' Require stack: - /home/euss/programasCursosPlatzi/libreriasDependenciasDeJS/cursoIntroduccionEmpaquetadoresWeb/rollup/node_modules/rollup/dist/bin/rollup at Function.Module._resolveFilename (node:internal/modules/cjs/loader:900:15) at Function.Module._load (node:internal/modules/cjs/loader:745:27) at Module.require (node:internal/modules/cjs/loader:972:19) at require (node:internal/modules/cjs/helpers:88:18) at Module.<anonymous> (/home/euss/programasCursosPlatzi/libreriasDependenciasDeJS/cursoIntroduccionEmpaquetadoresWeb/rollup/node_modules/rollup/dist/bin/rollup:16:19) at Module._compile (node:internal/modules/cjs/loader:1083:30) at Object.Module._extensions..js (node:internal/modules/cjs/loader:1112:10) at Module.load (node:internal/modules/cjs/loader:948:32) at Function.Module._load (node:internal/modules/cjs/loader:789:14) at Function.executeUserEntryPoint [as runMain] (node:internal/modules/run_main:72:12) { code: 'MODULE_NOT_FOUND', requireStack: [ '/home/euss/programasCursosPlatzi/libreriasDependenciasDeJS/cursoIntroduccionEmpaquetadoresWeb/rollup/node_modules/rollup/dist/bin/rollup' ] }
. Llevo horas tratando de arreglarlo :c
Les comparto mi proyecto y mi repositorio 😎
¿Cómo detecta Rollup los cambios en vivo?
Para que tu servidor reaccione al instante, necesitas habilitar el modo de observación o watch mode. En tu archivo de configuración web-dev-server.config.js, simplemente agregas la propiedad watch: true. Esto actúa como un centinela que vigila constantemente tus archivos fuente. Cuando guardas un cambio en tu código, el servidor detecta la modificación y refresca automáticamente el navegador sin que tengas que hacerlo manualmente. Para que la experiencia sea completa y fluida, asegúrate de que tu script de build en el package.json también esté configurado para escuchar los cambios, de modo que el código se recompile en segundo plano y el servidor local siempre muestre la versión más reciente de tu trabajo al instante.
npm run build
rollup@1.0.0 build rollup -c
(node:30956) Warning: To load an ES module, set "type": "module" in the package.json or use the .mjs extension.
(Use node --trace-warnings ... to show where the warning was created)
[!] RollupError: Node tried to load your configuration file as CommonJS even though it is likely an ES module. To resolve this, change the extension of your configuration to ".mjs", set "type": "module" in your package.json file or pass the "--bundleConfigAsCjs" flag.
Y agregue el type module a package.js y al ejecutar el npm run start me sale esto You are using CommonJS syntax such as "require" or "module.exports" in a config loaded as es module. Use import/export syntax, or load the file as a CommonJS module by using the .cjs file extension or by removing type="module" from your package.json. 😢
Hola, tuve ese mismo problema y lo que terminé haciendo para resolverlo fue agregando al package,json la línea
"type": "module"
y lo resolvió, pero eso generó un conflicto con el web-dev-server que me mostró lo siguiente:
You are using CommonJS syntax such as "require" or "module.exports" in a config loaded as es module. Use import/export syntax, or load the file as a CommonJS module by using the .cjs file extension or by removing type="module" from your package.json.
Por tanto, fui a la documentación de dev-server y vi que cambiar el config del server a import/export syntax era super sencillo. Mi archivo web-dev-server.config.js quedó así:
export default { port: 3008, nodeResolve: true, open: true, watch: true, appIndex: "dist/index.html", };
Espero te sirva.
Muchas gracias
Que lindo se siente saber solucionar un problema al leer el error <3
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 😎👍