El siguiente script, denominado mkweb, es un script para generar la estructura de carpetas (scaffolding) de un proyecto HTML/CSS/Javascript base. Por debajo, utiliza ViteJS para un desarrollo rápido basado en ESM con algunos añadidos:

Características

• Linter Javascript ESLint preconfigurado
• Linter CSS StyleLint preconfigurado
• Empaquetador Javascript Vite: Ultrarápido, ESM-compatible y potente
• Integración de gh-pages para despliegue en GitHub Pages
• 🆕 Soporte para crear videojuegos Phaser con Javascript

Requisitos

• Linux, Mac o Windows con WSL
• NodeJS 14+ (comprueba con node --version)
• NPM 7+ (comprueba con npm --version)
• curl (comprueba con curl --version)
• jq (comprueba con jq --version)

Instalación

Para instalar el script, simplemente escribe desde una terminal:

sudo curl -s https://manz.dev/download/mkweb -o /usr/local/bin/mkweb
sudo chmod +x /usr/local/bin/mkweb

Uso

Para utilizar el script, simplemente lo ejecutamos pasándole por parámetro el nombre de la carpeta del proyecto, que deberá coincidir con el nombre del repositorio. Utiliza preferentemente minúsculas y no uses espacios o signos de acentuación.

mkweb project-name
cd project-name
git remote add origin [email protected]:GITUSER/project-name.git
npm install
code .
npm run dev

• Para crear un proyecto de Phaser, escribe: mkweb project-name --phaser.
• Aunque el script usa npm, se recomienda usar pnpm, compatible y mucho más rápido.

Estructura

• La carpeta src/ incluye el código fuente del proyecto. En su interior:

• Un archivo HTML ( index.html ) con la página principal.
• Un archivo CSS ( index.css ) referenciado en el HTML anterior.
• Un archivo Javascript ( index.js ) referenciado en el HTML anterior.

• Una carpeta components/ que puede incluir WebComponents.
• Una carpeta assets/ que puede incluir estáticos (hasheados).

• Fuera de la carpeta src/, tendremos:

• Una carpeta dist/ creada tras un npm run build, con todos sus archivos procesados.
• Una carpeta public/ con archivos estáticos similar a assets/, pero a diferencia de esta, sus archivos son copiados a dist/ manteniendo la estructura de carpetas y nombres de ficheros sin ser hasheados.