Das Laravel-Team hat hart an einer Vite-Integration für Laravel gearbeitet. Seit dieser Woche ist Vite nun der Standard-Frontend-Asset-Bündler in neuen Laravel-Projekten und auch Breeze und Jetstream wurden aktualisiert.
Vite in der Default Installation von Laravel:
Taylor Otwell hat den schnellsten Weg aufgezeigt, wie man Vite in einem neuen Projekt ausprobieren kann, wenn man wissen möchte, wie schnell Vite Assets bündelt:
laravel new breeze-test --git
cd breeze-test
composer require laravel/breeze
php artisan breeze:install vue
npm install
npm run devDie Verwendung von Laravel Breeze ist der empfohlene Weg, um mit Vite zu beginnen, da es ein Gerüst für die Frontend- und Backend-Authentifizierung und Tools wie Tailwind, Inertia und Vite bietet.
Die Ausführung des obigen Codes sollte damit enden, dass Vite Dev-Assets erstellt und auf Änderungen im Vordergrund Ihres Terminals wartet.
Das Hauptlayout app.blade.php enthält nun eine @vite-Direktive und rendert während der Entwicklung das folgende HTML:
<script type="module" src="http://127.0.0.1:3000/@vite/client"></script>
<script type="module" src="http://127.0.0.1:3000/resources/js/app.js"></script>Wenn Sie Änderungen an Ihren Vue-Dateien vornehmen, werden Sie eine Ausgabe ähnlich der folgenden sehen, die aktualisierte Builds anzeigt.
Vite und Hot Module Replacement
Die HMR-Ausgabe ist ein „Hot Module Replacement“, das während der Entwicklung nahezu augenblickliche Build-Zeiten liefert. Diese Aktualisierungen waren so schnell, dass ich es zuerst nicht glauben konnte, was Ihnen hilft, in einen produktiven Fluss zu kommen, während Sie Änderungen am Frontend vornehmen. Die Aktualisierungen werden automatisch im Browser durchgeführt, während Sie arbeiten – eine fantastische Erfahrung!
Zusammen mit dem Vite-Update haben die Laravel-Dokumente eine Frontend-Dokumentationsseite, die Ihnen einen vollständigen Überblick über alle Ihre Frontend-Optionen mit Laravel-Anwendungen gibt.
Vite zum Standard zu machen, ist eine große Leistung und ein Schritt, der Laravel voranbringt. Herzlichen Glückwunsch an alle, die daran beteiligt waren!
Wenn Sie Änderungen an Ihren Vue-Dateien vornehmen, werden Sie eine ähnliche Ausgabe wie die folgende sehen, die die aktualisierten Builds anzeigt.
Die HMR-Ausgabe ist ein „Hot Module Replacement“, das während der Entwicklung nahezu sofortige Build-Zeiten ermöglicht. Diese Aktualisierungen waren so schnell, dass ich es zuerst nicht glauben konnte. Das hilft Ihnen, in einen produktiven Fluss zu kommen, während Sie Änderungen am Frontend vornehmen. Sie werden sehen, dass die Aktualisierungen automatisch im Browser stattfinden, während Sie arbeiten – eine fantastische Erfahrung!
Dokumentation in den Laravel Docs
Zusammen mit dem Vite-Update haben die Laravel-Dokumente eine Frontend-Dokumentationsseite, die Ihnen einen vollständigen Überblick über alle Frontend-Optionen mit Laravel-Anwendungen gibt.
