Un flux de travail spécialisé pour regrouper les applications React et Vite modernes dans des artefacts HTML portables à fichier unique pour une distribution fluide.
Installer & Télécharger
1. ClawHub CLI
Le moyen le plus rapide d'installer une compétence directement depuis le registre.
npx clawhub@latest install web-bundling
2. Installation manuelle
Copiez le dossier de la compétence dans l'un de ces emplacements
~/.openclaw/skills/ <project>/skills/ Priorité : Espace de travail > Local > Intégré
3. Installation du prompt
Copiez ce prompt dans OpenClaw pour l'installer automatiquement.
Aide-moi à installer web-bundling via Clawhub. Si Clawhub n'est pas installé, installe-le d'abord (npm i -g clawhub).
Vous préférez télécharger ?
Obtenez les fichiers bruts de la compétence dans une archive ZIP.
Qu'est-ce que Bundling Web (HTML unique) ?
La compétence Web Bundling fournit un cadre robuste pour convertir des applications web complexes en fichiers HTML autonomes. En intégrant React 18, TypeScript et Vite avec des outils de regroupement comme Parcel et html-inline, les développeurs peuvent créer des artefacts de haute performance qui incluent toute la logique, les styles et les ressources nécessaires dans un seul document. Cette approche est au cœur de l'écosystème Openclaw Skills pour les créateurs qui ont besoin de distribuer des applications sans dépendre d'environnements d'hébergement complexes ou de dépendances CDN externes.
Cette compétence garantit que chaque partie de votre application — des styles Tailwind CSS aux images et polices encodées en Base64 — est intégrée directement dans le HTML. Cela donne un fichier véritablement portable qui fonctionne hors ligne et qui est idéal pour des environnements spécialisés tels que les WebViews mobiles ou les plateformes de jeux indépendants. L'utilisation d'Openclaw Skills pour le regroupement aide à maintenir des performances élevées tout en simplifiant le cycle de vie du déploiement.
Cas d'utilisation de Bundling Web (HTML unique)
- Déploiement de jeux en tant que Telegram Mini Apps avec un point d'entrée unique.
- Empaquetage de jeux HTML5 pour une distribution sur itch.io ou CrazyGames.
- Création de prototypes et de démos autonomes pour des présentations clients hors ligne.
- Construction d'artefacts de portfolio faciles à partager et à visualiser sans configuration d'hébergement.
- Développement d'utilitaires web offline-first qui ne nécessitent aucune requête réseau externe.
Comment fonctionne Bundling Web (HTML unique)
- Initialisez le processus de build en exécutant le script de production Vite pour compiler le code source React et TypeScript.
- Traitez le dossier de distribution résultant avec Parcel pour consolider les dépendances et supprimer les source maps.
- Exécutez l'utilitaire html-inline pour transformer le CSS externe, le JS et les ressources multimédias en balises internes et en chaînes Base64.
- Effectuez une vérification de validation finale pour garantir la prise en charge du tactile mobile et la compatibilité avec la safe-area pour les environnements WebView.
- Exportez le fichier bundle.html final pour un déploiement sur les plateformes cibles comme GitHub Pages ou les portails de jeux.
Configuration de Bundling Web (HTML unique)
Pour commencer avec ce modèle de regroupement via Openclaw Skills, suivez ces étapes CLI :
# 1. Compiler le projet Vite
npm run build
# 2. Regrouper le dossier dist avec Parcel
npx parcel build dist/index.html --no-source-maps
# 3. Intégrer toutes les ressources externes dans un seul fichier
npx html-inline dist/index.html -o bundle.html
Schéma de données et taxonomie de Bundling Web (HTML unique)
Le processus de regroupement organise les données dans une taxonomie à fichier unique. Toutes les références externes sont remplacées par des URI de données internes comme suit :
| Type de ressource | Implémentation | Objectif |
|---|---|---|
| Images | URI de données Base64 | Intègre PNG/JPG directement dans l'attribut src. |
| Polices | CSS @font-face | Intègre les fichiers WOFF2 en Base64 dans les balises de style. |
| Audio | Balise audio Base64 | Intègre de petits effets sonores pour une lecture sans latence. |
| Logique | Script en ligne | Injecte le JavaScript minifié au bas du body. |
| Styles | Style en ligne | Injecte le Tailwind/CSS compilé dans le head du document. |
Fonctionnalités avancées de Bundling Web (HTML unique)
- Prise en charge des pipelines de build React 18 et TypeScript.
- Intégration automatisée des ressources pour les images, les polices et les fichiers audio.
- Configuration optimisée pour le mobile pour les environnements WebView de Telegram Mini App.
- Builds sans dépendance qui fonctionnent entièrement hors ligne.
- Compatibilité avec les principaux portails de jeux web comme Poki et CrazyGames.
SKILL.md
Chargement
Compétences Openclaw associées
Video Pro
Une compétence de montage vidéo haute performance utilisant Remotion et FFmpeg pour la production et le traitement de vidéos programmatiques sur des nœuds distants.
Vérifier Avant de Terminer
Un protocole de vérification rigoureux qui exige des preuves fraîches et objectives avant qu'un agent d'IA ne puisse prétendre à l'achèvement d'une tâche ou effectuer un commit.
Discipline TDD
Un cadre rigoureux de Développement Piloté par les Tests pour les agents IA afin de garantir la fiabilité du code et d'éliminer les régressions.
Développement piloté par sous-agents (subagent-dev)
Un modèle d'implémentation structuré qui utilise de nouveaux sous-agents pour chaque tâche afin de garantir la conformité aux spécifications et une qualité de code élevée.
Web Design Pro
Une boîte à outils de qualité professionnelle pour implémenter des systèmes de design, des mises en page réactives et des standards UI/UX spécifiques aux jeux.
YouTube Pro (Édition Miss Kim)
Un moteur d'analyse avancé pour extraire des transcriptions, des métadonnées et des informations intelligentes à partir du contenu YouTube.
En vedette*
