web-bundling

Umiejętność do tworzenia samodzielnych plików HTML z aplikacji React, gier i prototypów. Pozwala na spakowanie całej aplikacji (kod, style, zasoby) w jeden plik bez zależności zewnętrznych, gotowy do udostępnienia na itch.io, w Telegramie Mini App lub jako artefakt portfela. Obsługuje React 18 + Vite + Parcel oraz inline'owanie obrazów i czcionek w formacie base64.

1. Przygotuj projekt React z TypeScript i Vite. Uruchom npm run build, aby wygenerować folder dist/ z plikami aplikacji.

2. Zainstaluj Parcel (jeśli jeszcze go nie masz) i spakuj wygenerowany dist/index.html w jeden plik: npx parcel build dist/index.html --no-source-maps. Parcel połączy wszystkie moduły i zasoby.

3. Użyj narzędzia html-inline, aby osadzić pozostałe zasoby bezpośrednio w HTML: npx html-inline dist/index.html -o bundle.html. Wynik to pojedynczy plik HTML bez zależności CDN.

4. Zoptymalizuj rozmiar: skompresuj obrazy, upewnij się, że kod jest zminifikowany, a audio (jeśli jest) osadź w base64 tylko dla małych efektów dźwiękowych.

5. Przetestuj plik offline i na urządzeniu mobilnym (jeśli planujesz Telegram Mini App). Sprawdź konsolę przeglądarki pod kątem błędów.

6. Wgraj gotowy bundle.html na wybraną platformę: itch.io (bezpośredni upload), Telegram Mini App (hosting + konfiguracja bota), GitHub Pages lub inne serwisy.