Frontend-Guide · npm · Node.js · Vite · Webpack · Tailwind · SCSS
TYPO3 Frontend Build mit npm, Node.js, Vite und Webpack
Moderne TYPO3-Frontends brauchen oft einen reproduzierbaren Asset-Build. npm, Node.js, Vite, Webpack, Tailwind, SCSS oder TypeScript sollten so eingebunden werden, dass Deployment, Caching und Wartung stabil bleiben.
Build-Prozess bewusst wählen
Vite ist oft schlanker, Webpack steckt in vielen bestehenden Projekten. Entscheidend sind Team, Legacy-Code, Anforderungen und Deployment.
Assets ins Sitepackage integrieren
CSS, JavaScript, Fonts und Images brauchen klare Einstiegspunkte, versionierte Ausgabe und Regeln für Caching und Produktion.
CI/CD und Wartung sichern
Node-Versionen, Lockfiles, Build-Kommandos und Abhängigkeiten sollten dokumentiert und reproduzierbar sein.
Checkliste
Was vor der Entscheidung geklärt sein sollte
- • Node- und npm-Version festlegen
- • Build-Tool passend wählen
- • Tailwind/SCSS/TypeScript strukturieren
- • Output und Caching definieren
- • CI/CD-Build testen
Häufige Fragen
Braucht jedes TYPO3-Projekt npm? ›
Nein. Für einfache Seiten kann weniger reichen. Bei Tailwind, SCSS, TypeScript oder Framework-Komponenten ist ein npm/Node.js-Build aber sinnvoll.
Vite oder Webpack für TYPO3? ›
Vite ist oft einfacher und schneller, Webpack kann bei bestehenden Setups sinnvoll bleiben. Die Entscheidung sollte zum Projekt passen.
Was ist im Deployment wichtig? ›
Reproduzierbare Builds, Lockfile, klare Output-Pfade, Caching, Source Maps nach Bedarf und keine manuellen Änderungen an generierten Assets.