Vite Schulung: Frontend-Builds mit TypeScript
Ein TypeScript-Projekt bis zur CI/CD-Pipeline aufbauen, Bibliotheken bündeln und Webpack-Migrationen planen
Die wichtigsten Themen
Vite-Projekte mit TypeScript aufsetzen
Plugins und Umgebungsvariablen steuern
Dependencies und Chunks optimieren
Bibliotheken im Library Mode bauen
Webpack-Migrationen vorbereiten
Builds in CI/CD prüfen
Überblick Gewachsene Webpack-Projekte verteilen Build-Regeln auf Loader, Plugins und npm-Skripte. Ein geänderter Asset-Pfad betrifft oft mehrere Dateien. Die Vite Schulung arbeitet drei Tage lang mit einem TypeScript-Projekt,...
Gewachsene Webpack-Projekte verteilen Build-Regeln auf Loader, Plugins und npm-Skripte. Ein geänderter Asset-Pfad betrifft oft mehrere Dateien. Die Vite Schulung arbeitet drei Tage lang mit einem TypeScript-Projekt, das vom Entwicklungsserver bis zur CI/CD-Pipeline für den Produktions-Build ausgebaut wird. Du misst Build-Zeiten und Bundle-Größen, leitest Chunk-Grenzen aus einem Visualizer-Bericht ab und prüfst die Ausgabe mit Vitest. Der Library Mode erzeugt ein installierbares Paket; TypeScript-Deklarationen entstehen über tsc oder ein passendes Vite-Plugin. Ein separater Migrationspfad überträgt die Aufgaben von Webpack-Loadern und Plugins auf Vite und berücksichtigt die abweichenden Umgebungsvariablen von Create React App. Die benötigte Software und vorbereitete Projektdateien stehen für alle Übungen bereit. Bei Präsenzterminen arbeitest du an einem Schulungsrechner.
Die Themen Vite-Projekt mit TypeScript anlegen · Entwicklungsserver und Produktions-Build vergleichen · Einstiegspunkte und Projektstruktur festlegen · CSS und statische Assets verarbeiten...
Projektstart mit TypeScript
- Vite-Projekt mit TypeScript anlegen
- Entwicklungsserver und Produktions-Build vergleichen
- Einstiegspunkte und Projektstruktur festlegen
- CSS und statische Assets verarbeiten
Konfiguration und Betriebsmodi
- Vite-Konfiguration mit defineConfig strukturieren
- Plugins auswählen und konfigurieren
- Betriebsmodi und Umgebungsvariablen trennen
- Aliase und TypeScript-Pfade synchronisieren
Abhängigkeiten und Bundle-Analyse
- Abhängigkeiten im Entwicklungsserver vorbündeln
- Code-Splitting im Produktions-Build steuern
- Dynamische Imports und Chunk-Grenzen definieren
- Bundles mit Visualizer-Berichten analysieren
Library Mode für Frontend-Bibliotheken
- Einstiegspunkte für Frontend-Bibliotheken festlegen
- Externe Abhängigkeiten vom Bundle ausschließen
- Ausgabeformate mit package.json abstimmen
- TypeScript-Deklarationen mit tsc erzeugen
- Bibliothek in einer Beispielanwendung prüfen
Tests, Messungen und CI/CD
- Komponententests mit Vitest ausführen
- Vitest-Konfiguration und Testumgebung abstimmen
- Testabdeckung mit Coverage-Berichten prüfen
- Build-Zeiten und Bundle-Größen messen
- Tests und Builds in CI/CD ausführen
Migration von Webpack und Create React App
- Aufgaben der Webpack-Loader abbilden
- Plugin-Aufgaben einzeln übertragen
- CRA-Variablen auf import.meta.env umstellen
- Asset-Pfade mit der Base-Option abstimmen
- Migrationsschritte und Rückfallpunkte planen
Zielgruppe
- Frontend-Entwickler mit TypeScript-Projekten
- Teams mit Webpack- oder CRA-Bestandsprojekten
- Fachkräfte für wiederverwendbare Frontend-Pakete
- DevOps-Fachkräfte für Frontend-Pipelines
Das lernst du
- Vite-Projekte mit TypeScript eigenständig konfigurieren
- Plugins und Umgebungsvariablen nach Einsatzgebiet auswählen
- Dependency-Optimierung und Code-Splitting anhand von Build-Reports abstimmen
- Wiederverwendbare Pakete im Library Mode veröffentlichungsfähig bauen
- Tests und Produktions-Builds in CI/CD reproduzierbar ausführen
- Webpack- oder CRA-Projekte über überprüfbare Release-Schritte migrieren
So arbeiten wir
Ein durchgängiges TypeScript-Projekt verbindet kurze Fachimpulse mit Konfigurationsübungen, Build-Messungen und Tests. Eine geführte Migrationswerkstatt überträgt Webpack- oder CRA-Einstellungen auf Vite; gemeinsame Reviews prüfen die Ergebnisse.
Empfohlene Vorkenntnisse
- TypeScript- und npm-Grundkenntnisse, etwa aus dem TypeScript Grundkurs
- Erfahrung mit einem komponentenbasierten Frontend-Projekt
Dein Fahrplan
Das TypeScript-Projekt erhält eine Vite-basierte Entwicklungs- und Build-Umgebung.
- Projektstruktur und Einstiegspunkte
- Entwicklungsserver und Produktions-Build
- Plugins und Pfad-Aliases
- Umgebungsvariablen und Betriebsmodi
Organisatorisches
Lernformate
Unsere Seminare bieten dir maximale Flexibilität: Du kannst zwischen Live-Online und Vor Ort in unseren modernen Schulungszentren im D-A-CH Raum wählen. Beide Formate garantieren dir die gleiche hohe Qualität und interaktive Lernerfahrung.
Schulungsarten
Wir bieten dir verschiedene Schulungsarten: Offene Seminare, Firmenseminare für Teams und Inhouse-Schulungen direkt bei dir vor Ort. So findest du genau das Format, das zu deinen Bedürfnissen passt.
Uhrzeiten
09:00-16:00 Uhr
Aktuelle Software
In unseren offenen Kursen arbeiten wir mit der aktuellsten Software-Version. So lernst du direkt mit den Tools und Features, die du auch in deinem Arbeitsalltag verwendest - praxisnah und zukunftsorientiert. Bei Inhouse- und Firmenschulungen bestimmt ihr die Version.
Deine Vorteile
Zufriedenheitsgarantie
Wir sind von unserer Qualität überzeugt. Sollte ein Training einmal nicht deinen Erwartungen entsprechen, bieten wir dir an, den Kurs kostenlos zu wiederholen oder ein anderes Training zu besuchen. Ohne Risiko, ohne Diskussion.
Inklusivleistungen
Deine Teilnahme beinhaltet: Schulungsmaterial, Zertifikat, Verpflegung (bei Präsenzveranstaltungen) und persönliche Betreuung durch unsere Trainer und unser Orga-Team. Alles aus einer Hand - keine versteckten Kosten.
Lernen von Experten
Unsere Trainer sind zertifizierte und erfahrene Profis mit jahrelanger Berufserfahrung. Sie vermitteln dir in den Kursen nicht nur theoretisches Wissen, sondern teilen ihre Erfahrungen aus realen Projekten und helfen dir, das Gelernte direkt in deiner täglichen Arbeit anzuwenden. Das ist kein Werbeversprechen, sondern unser Anspruch. Am besten siehst du das in unseren Bewertungen, z.B. auch bei Google.
Keine Vorkasse
Du zahlst erst nach dem Seminar. Keine Vorkasse, keine Vorauszahlung - so kannst du sicher sein, dass du nur für das bezahlst, was du auch wirklich erhalten hast. Die Rechnung erhältst du erst nach Kursbeginn.
Max. 8 Teilnehmende
Wir setzen auf kleine Gruppen, damit du die Aufmerksamkeit bekommst, die du verdienst. So haben wir mehr Zeit für deine individuellen Fragen und können gezielt auf deine Bedürfnisse eingehen.
Termine & Buchung
Leider haben wir aktuell keine Termine geplant. Es wird wahrscheinlich bei uns etwas schief gelaufen sein - bitte kontaktiere uns und wir finden den passenden Termin.
Nicht der passende Termin dabei?
Wir finden eine Lösung: anderer Termin, mehrere Teilnehmer, Inhouse-Schulung oder individuelle Beratung.
Lieber gleich das ganze Team schulen?
Diese Schulung gibt es auch exklusiv für dein Unternehmen, bei euch vor Ort, an unseren Standorten oder Live-Online. Inhalte und Termine nach Maß.
Inhouse-Schulung
Wir kommen zu euch: diese Schulung maßgeschneidert in euren Räumen, für Unternehmen und Behörden.
- Inhalte exakt auf euch zugeschnitten
- Termine nach euren Bedürfnissen
- Günstiger ab mehreren Teilnehmern
- Vertraute Umgebung, kein Reiseaufwand
Firmen-Seminar
Exklusiv für dein Team an einem unserer Standorte oder Live-Online, individuell angepasst.
- Geschlossene Gruppe aus eurem Haus
- Individuelle Terminplanung
- An unseren Standorten oder Live-Online
- Angepasste Inhalte
Fragen und Antworten zu Vite Schulung: Frontend-Builds mit TypeScript
Was ist Vite und wofür wird es eingesetzt?
Ein Entwicklungsserver stellt ES-Module bedarfsgerecht bereit und reagiert dadurch schnell auf Dateiänderungen. Für die Produktion erzeugt Vite gebündelte Assets aus JavaScript, TypeScript, CSS und statischen Dateien in einem konfigurierbaren Build-Prozess. Plugins, Umgebungsvariablen und Library Mode decken Anforderungen von Anwendungen und wiederverwendbaren Frontend-Bibliotheken ab.
Wann eignet sich Vite für ein bestehendes Webpack-Projekt?
Vite eignet sich, wenn ein Projekt seine Entwicklungsumgebung vereinfachen und aktuelle TypeScript- oder Framework-Workflows nutzen soll. Vor der Migration werden Loader, Plugins, Asset-Pfade und Node-spezifische Abhängigkeiten geprüft, weil diese Bestandteile meist konkrete Anpassungen verlangen.
Was bedeutet Library Mode in Vite?
Der Library Mode erzeugt verteilbare Pakete aus definierten Einstiegspunkten. Externe Abhängigkeiten, Ausgabeformate und Paket-Metadaten werden so konfiguriert, dass andere Frontend-Anwendungen die Bibliothek importieren und TypeScript ihre öffentliche API erkennt.
Eignet sich die Vite Schulung für Create React App?
Die Schulung behandelt den Wechsel von Create React App zu Vite anhand typischer Anpassungen am HTML-Einstieg, an Umgebungsvariablen und an Asset-Pfaden. Grundkenntnisse in React sind hilfreich, wenn das eigene Migrationsprojekt auf React basiert.
Wird das Vite Training auf Deutsch durchgeführt?
Die Vite Schulung wird auf Deutsch durchgeführt; etablierte Fachbegriffe und Konfigurationsnamen bleiben auf Englisch. Benötigte Software und vorbereitete Projektumgebungen werden bereitgestellt, daher brauchst du keinen eigenen Rechner und keine eigene Lizenz mitzubringen.
Kann die Schulung an den eigenen Frontend-Stack angepasst werden?
Als Inhouse- oder Firmenseminar kann der Trainer Schwerpunkte wie React, Vue, Webpack-Konventionen oder die vorhandene CI/CD-Plattform auf Anfrage berücksichtigen. Der konkrete Umfang wird vorab anhand des Stacks und der gewünschten Migrationsziele abgestimmt.
Weitere häufig gestellte Fragen und Antworten findest du in den FAQs.
Unser Qualitätsversprechen: Wissen, das in der Praxis funktioniert
Aus der Praxis für die Praxis
Schluss mit theoretischem Ballast. Wir trainieren dich für reale IT-Herausforderungen, nicht für Multiple-Choice-Tests. Unsere Trainer vermitteln dir genau das Wissen, das am nächsten Montagmorgen im Job wirklich funktioniert.
Individuell statt "Schema F"
Deine Fragen passen nicht ins Standard-Skript? Bei uns schon. Wir verzichten auf starre Lehrpläne und geben deinen konkreten Projekt-Fragen Raum. Unsere Trainer passen die Inhalte flexibel an das an, was dich und dein Team aktuell weiterbringt.
Maximale Freiheit: Remote oder vor Ort
Lerne so, wie es in deinen Alltag passt - ohne Reise-Stress und Zeitverlust. Egal ob remote, hybrid oder präsent vor Ort: Wir garantieren dir ein nahtloses und effektives Lernerlebnis, egal von wo du dich zuschaltest.
Mit Zufriedenheitsgarantie
Wir sind von unserer Qualität überzeugt - und wollen, dass du es auch bist. Sollte ein Training einmal nicht deinen Erwartungen entsprechen, bieten wir dir an, den Kurs kostenlos zu wiederholen oder ein anderes Training zu besuchen. Ohne Risiko, ohne Diskussion.
NOCH FRAGEN?
Rufe mich an oder schreibe mir eine E-Mail.
Michaela Berger
Über 20.000 Unternehmen und Behörden vertrauen auf uns
