In Laravel 11 kann das Hinzufügen von JavaScript zu Ihrem Projekt dank Vite, dem Standard-Asset-Bundler, ein Kinderspiel sein. So richten Sie Ihr JavaScript für alle möglichen Szenarien ein, von der globalen Einbindung bis zum bedingten Laden in bestimmten Ansichten.
In vielen Fällen möchten Sie möglicherweise JavaScript global in Ihre Laravel-Anwendung einbinden. So organisieren und bündeln Sie JavaScript für eine universelle Einbindung.
Laravel 11 verwendet Vite zur Verwaltung von Vermögenswerten. So konfigurieren Sie es, um Ihr JavaScript zu bündeln:
import './custom.js';
@vite('resources/js/custom.js')
Stellen Sie sicher, dass vite.config.js so eingestellt ist, dass @vite-Importe korrekt verarbeitet werden. Standardmäßig sollte es etwa so aussehen:
import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';
export default defineConfig({
plugins: [
laravel({
input: ['resources/js/app.js'],
refresh: true,
}),
],
});
So stellen Sie Ihr Vermögen mit Vite zusammen:
Um JavaScript-Dateien in Ihre Vorlagen einzubinden, verwenden Sie die @vite-Direktive:
<!DOCTYPE html>
<html lang="en">
<head>
<title>My Laravel App</title>
@vite('resources/js/app.js')
</head>
<body>
<!-- Content here -->
</body>
</html>
Mit diesem Setup wird JavaScript in einem Laravel 11-Projekt auf der gesamten Website verfügbar sein.
Wenn Sie JavaScript bedingt in bestimmte Ansichten einbinden, ist es wichtig, die Reihenfolge zu verstehen, in der Blade-Vorlagen gerendert werden.
In Laravel werden Layouts zuerst verarbeitet, gefolgt von Einzelansichten und Teilansichten. Hier ist der Rendervorgang:
Aufgrund dieser Reihenfolge funktionieren Standardvariablenprüfungen nicht, wenn Sie JavaScript-Dateien basierend auf dem Inhalt der untergeordneten Ansicht bedingt zum Layout hinzufügen möchten. Für eine flexiblere Handhabung von seitenspezifischem JavaScript müssen Sie die Anweisungen @stack und @push von Blade verwenden.
Zum Hinzufügen von JavaScript zu bestimmten Ansichten bieten die @stack- und @push-Direktiven von Laravel eine effiziente Lösung, die es Ihnen ermöglicht, Skripte bedingt in das Layout einzuschließen.
Erstellen Sie in Ihrem Layout einen Stapel für seitenspezifische Skripte:
import './custom.js';
In der spezifischen Blade-Datei, die das JavaScript benötigt, in den Skriptstapel verschieben:
@vite('resources/js/custom.js')
Bei diesem Setup werden „custom.js“ nur einbezogen, wenn diese bestimmte Ansicht geladen wird. Diese Methode bietet eine saubere Lösung, die mit der Renderreihenfolge von Laravel funktioniert und sicherstellt, dass JavaScript-Dateien nach Bedarf bedingt eingebunden werden.
Die Platzierung von @push-Anweisungen in einer Blade-Ansicht ist in erster Linie für die Lesbarkeit und die Reihenfolge der Ausführung wichtig. So nutzen Sie @push effektiv:
import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';
export default defineConfig({
plugins: [
laravel({
input: ['resources/js/app.js'],
refresh: true,
}),
],
});
<!DOCTYPE html>
<html lang="en">
<head>
<title>My Laravel App</title>
@vite('resources/js/app.js')
</head>
<body>
<!-- Content here -->
</body>
</html>
In diesem Fall wird script1.js vor script2.js geladen, da @push Inhalte in der deklarierten Reihenfolge zum Stapel hinzufügt.
<!DOCTYPE html>
<html lang="en">
<head>
<title>My Laravel App</title>
@vite('resources/js/app.js')
@stack('scripts') <!-- Define a stack for additional scripts -->
</head>
<body>
@yield('content')
</body>
</html>
Wenn dieser Teil in einer Ansicht enthalten ist, wird „partial-special.js“ zum Skriptstapel in der Layoutdatei hinzugefügt.
import './custom.js';
Hier werden Critical.js vor Non_critical.js geladen, unabhängig von ihrer Platzierung in der Blade-Datei.
Wenn Sie eine genauere Kontrolle darüber benötigen, wann JavaScript enthalten ist, ermöglichen die bedingten Anweisungen von Laravel eine routen- oder variablenbasierte Logik direkt im Layout.
Sie können Routenprüfungen direkt im Layout verwenden, um JavaScript basierend auf der aktuellen Route einzubinden:
@vite('resources/js/custom.js')
Um Skripte basierend auf Variablen bedingt zu laden, können Sie in der Controller- oder untergeordneten Ansicht ein Flag setzen und dann im Layout danach suchen:
import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';
export default defineConfig({
plugins: [
laravel({
input: ['resources/js/app.js'],
refresh: true,
}),
],
});
<!DOCTYPE html>
<html lang="en">
<head>
<title>My Laravel App</title>
@vite('resources/js/app.js')
</head>
<body>
<!-- Content here -->
</body>
</html>
Mit diesem Ansatz können Sie das Laden von JavaScript basierend auf bestimmten Variablen oder Routen steuern und so Flexibilität für benutzerdefinierte Seiteneinrichtungen bieten.
Hier ein kurzer Überblick über die besprochenen Methoden:
Mit diesen Optionen können Sie das Laden von JavaScript präzise steuern und so Ihr Laravel 11-Projekt effizient und wartbar machen.
Das obige ist der detaillierte Inhalt vonSo integrieren Sie JavaScript in Laravel Eine Schritt-für-Schritt-Anleitung für alle Szenarien. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
![[Web-Frontend] Node.js-Schnellstart](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
