So integrieren Sie JavaScript in Laravel 11: Eine Schritt-für-Schritt-Anleitung für alle Szenarien

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.

1. Einbinden von JavaScript in alle Dateien

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.

Schritt 1: Platzieren Sie Ihre JavaScript-Datei

1. Speicherort: Speichern Sie JavaScript-Dateien im Verzeichnis resources/js. Wenn Ihre Datei beispielsweise „custom.js“ heißt, speichern Sie sie unter resources/js/custom.js.
2. Organisieren: Bei komplexen Projekten mit mehreren JavaScript-Dateien können Sie diese in Unterverzeichnissen in resources/js organisieren, z. B. resources/js/modules/custom.js.

Schritt 2: Kompilieren Sie JavaScript mit Vite

Laravel 11 verwendet Vite zur Verwaltung von Vermögenswerten. So konfigurieren Sie es zum Bündeln Ihres JavaScript:

1. In app.js einschließen: Öffnen Sie resources/js/app.js und importieren Sie Ihre benutzerdefinierte Datei:

   import './custom.js';

1. Direkter Import in Ansichten: Wenn Sie das JavaScript nur in bestimmten Ansichten möchten, können Sie alternativ die @vite-Direktive in der Blade-Vorlage verwenden:

   @vite('resources/js/custom.js')

Schritt 3: Konfigurieren Sie vite.config.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,
        }),
    ],
});

Schritt 4: Vite ausführen

So stellen Sie Ihre Assets mit Vite zusammen:

• Für die Entwicklung: Führen Sie npm aus und führen Sie dev aus
• Für die Produktion: Führen Sie npm run build aus

Schritt 5: Laden Sie JavaScript in Blade-Vorlagen

Um JavaScript-Dateien in Ihre Vorlagen einzuschließen, verwenden Sie die @vite-Direktive:

    
    @vite('resources/js/app.js')


    

Zusammenfassung

• Speichern JavaScript-Dateien in resources/js.
• Importieren in app.js zur globalen Einbindung oder bei Bedarf direkt in Blade-Vorlagen einbinden.
• Kompilieren Assets mit Vite.
• Verwenden Sie @vite in Blade-Vorlagen, um JavaScript zu laden.

Mit diesem Setup wird JavaScript in einem Laravel 11-Projekt auf der gesamten Website verfügbar sein.

2. Grundlegendes zur Blade-Rendering-Reihenfolge

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 einzelnen Ansichten und Teilansichten. Hier ist der Rendervorgang:

1. Das Layout wird zuerst gerendert, wobei Platzhalter (@yield und @section) für die Inhaltsinjektion erstellt werden.
2. Untergeordnete Ansichten oder Teilansichten werden als nächstes verarbeitet, wobei ihr Inhalt in die Layout-Platzhalter eingefügt wird.

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.

3. Bedingtes Einbinden von JavaScript in bestimmte Ansichten mithilfe von Stack und Push

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.

Schritt 1: Definieren Sie einen Stapel in Ihrem Layout

Erstellen Sie in Ihrem Layout einen Stapel für seitenspezifische Skripte:

    
    @vite('resources/js/app.js')
    @stack('scripts') 


    @yield('content')

Schritt 2: Skripte aus untergeordneten Ansichten übertragen

In der spezifischen Blade-Datei, die das JavaScript benötigt, in den Skriptstapel verschieben:

@extends('layout')

@section('content')
    
@endsection

@push('scripts')
    @vite('resources/js/custom.js')
@endpush

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.

Wo soll @push deklariert 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:

1. Platzierung in der Ansicht: Während Sie @push an einer beliebigen Stelle in einer Blade-Ansicht platzieren können, empfiehlt es sich, es am Ende der Datei zu platzieren, normalerweise nach dem @section-Inhalt. Dadurch bleibt der skriptbezogene Code vom Hauptinhalt getrennt, was die Lesbarkeit und Wartbarkeit verbessert.

   @extends('layout')

   @section('content')
       
   @endsection

   @push('scripts')
       @vite('resources/js/custom.js')
   @endpush

1. Reihenfolge mehrerer @push-Anweisungen: Wenn Sie mehrere @push-Deklarationen für denselben Stack haben (z. B. @push('scripts')), werden diese in der Reihenfolge angehängt, in der sie in der Ansicht erscheinen. Zum Beispiel:

   @push('scripts')
       
   @endpush

   @push('scripts')
       
   @endpush

In diesem Fall wird script1.js vor script2.js geladen, da @push Inhalte in der deklarierten Reihenfolge zum Stapel hinzufügt.

1. Verwendung von @push in Partials und Komponenten: @push kann auch in Blade-Partials (z. B. @include) oder Blade-Komponenten verwendet werden. Dies ist nützlich, um ansichtsspezifische Skripte oder Stile direkt in wiederverwendbare Komponenten einzubinden und so die Verwaltung von Abhängigkeiten zu vereinfachen.

   
   

       
   

   @push('scripts')
       @vite('resources/js/partial-specific.js')
   @endpush

Wenn dieser Teil in einer Ansicht enthalten ist, wird „partial-special.js“ zum Skriptstapel in der Layoutdatei hinzugefügt.

1. Steuern Sie die Reihenfolge mit @prepend: Wenn bestimmte Skripte vor anderen im selben Stapel geladen werden müssen, können Sie @prepend anstelle von @push verwenden. @prepend platziert Inhalte am Anfang des Stapels und ermöglicht so eine bessere Kontrolle über die Ladereihenfolge.

   @prepend('scripts')
       
   @endprepend

   @push('scripts')
       
   @endpush

Hier werden Critical.js vor non_critical.js geladen, unabhängig von ihrer Platzierung in der Blade-Datei.

Wichtige Erkenntnisse

• Platzieren Sie @push am Ende der Ansichten, um Klarheit und Wartbarkeit zu gewährleisten.
• Reihenfolge wird durch die Platzierung innerhalb der Ansicht bestimmt, wobei frühere @push-Anweisungen zuerst geladen werden.
• @push funktioniert in Teilen und Komponenten und erleichtert so die Einbindung ansichtsspezifischer Abhängigkeiten.
• Verwenden Sie @prepend für Skripte, die zuerst in denselben Stapel geladen werden müssen.

4. Alternative: Verwendung von Inline-Bedingungsanweisungen im Layout

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.

Bedingtes Einschließen basierend auf der Route

Sie können Routenprüfungen direkt im Layout verwenden, um JavaScript basierend auf der aktuellen Route einzubinden:

@if (request()->routeIs('some.route.name'))
    @vite('resources/js/custom.js')
@endif

Bedingtes Einschließen basierend auf einer Variablen

Um Skripte basierend auf Variablen bedingt zu laden, können Sie im Controller oder in der untergeordneten Ansicht ein Flag setzen und dann im Layout danach suchen:

1. In Ihrem Controller:

   return view('your.view', ['loadCustomJS' => true]);

1. Im Layout:

   @if (!empty($loadCustomJS))
       @vite('resources/js/custom.js')
   @endif

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.

Zusammenfassung

Hier ein kurzer Überblick über die besprochenen Methoden:

• Globale Einbindung: Platzieren Sie JavaScript in app.js und binden Sie es global mit @vite ein.
• Bedingte Einbindung mit Stack und Push: Verwenden Sie @stack- und @push-Anweisungen für eine flexible, modulare Skriptverarbeitung, die sicherstellt, dass Skripte nur in Ansichten geladen werden, wo sie benötigt werden.
• Bedingte Anweisungen im Layout: Verwenden Sie routenbasierte Prüfungen oder Controller-Variablen, um JavaScript direkt im Layout bedingt zu laden.

Mit diesen Optionen können Sie das Laden von JavaScript präzise steuern und so Ihr Laravel 11-Projekt effizient und wartbar machen.