Как включить JavaScript в Laravel 11: пошаговое руководство для всех сценариев

В Laravel 11 добавление JavaScript в ваш проект может быть простым благодаря Vite, сборщику ресурсов по умолчанию. Вот как настроить JavaScript для всех типов сценариев: от глобального включения до условной загрузки в определенных представлениях.

1. Включение JavaScript во все файлы

Во многих случаях вы можете захотеть включить JavaScript глобально в свое приложение Laravel. Вот как организовать и объединить JavaScript для универсального использования.

Шаг 1. Разместите файл JavaScript

1. Местоположение: храните файлы JavaScript в каталоге resources/js. Например, если ваш файл называется custom.js, сохраните его как resources/js/custom.js.
2. Организовать: сложные проекты с несколькими файлами JavaScript можно организовать в подкаталогах в resources/js, например resources/js/modules/custom.js.

Шаг 2. Скомпилируйте JavaScript с помощью Vite

Laravel 11 использует Vite для управления ресурсами. Чтобы настроить его для объединения вашего JavaScript:

1. Включить в app.js: откройте resources/js/app.js и импортируйте свой собственный файл:

   import './custom.js';

1. Прямой импорт в представления: Альтернативно, если вам нужен JavaScript только в определенных представлениях, вы можете использовать директиву @vite в шаблоне Blade:

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

Шаг 3. Настройте vite.config.js

Убедитесь, что файл vite.config.js настроен на правильную обработку импорта @vite. По умолчанию это должно выглядеть примерно так:

import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';

export default defineConfig({
    plugins: [
        laravel({
            input: ['resources/js/app.js'],
            refresh: true,
        }),
    ],
});

Шаг 4: Запустите Vite

Чтобы скомпилировать ваши ресурсы с помощью Vite:

• Для разработки: запустите npm run dev
• Для производства: запустите npm, запустите сборку

Шаг 5. Загрузите JavaScript в шаблоны Blade

Чтобы включить файлы JavaScript в ваши шаблоны, используйте директиву @vite:

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


    

Краткое содержание

• Сохраняйте файлы JavaScript в resources/js.
• Импортируйте в app.js для глобального включения или при необходимости включите непосредственно в шаблоны Blade.
• Скомпилируйте ресурсы с помощью Vite.
• Используйте @vite в шаблонах Blade для загрузки JavaScript.

При такой настройке JavaScript будет доступен для всего сайта в проекте Laravel 11.

2. Понимание порядка рендеринга клинков

При условном включении JavaScript в определенные представления важно понимать порядок, в котором отображаются шаблоны Blade.

В Laravel сначала обрабатываются макеты, а затем отдельные представления и частичные представления. Вот процесс рендеринга:

1. Сначала визуализируется макет с заполнителями (@yield и @section), созданными для внедрения контента.
2. Следующими обрабатываются дочерние представления или частичные представления, а их содержимое вставляется в заполнители макета.

Из-за этого порядка, если вы хотите условно добавлять файлы JavaScript в макет на основе содержимого дочернего представления, стандартные проверки переменных не будут работать. Вам понадобится использовать директивы Blade @stack и @push для более гибкой обработки JavaScript, специфичного для конкретной страницы.

3. Условное включение JavaScript в определенные представления с помощью Stack и Push

Для добавления JavaScript в определенные представления, директивы Laravel @stack и @push предлагают эффективное решение, позволяющее условно включать скрипты в макет.

Шаг 1. Определите стек в своем макете

В макете создайте стек для скриптов, специфичных для страниц:

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


    @yield('content')

Шаг 2. Отправка сценариев из дочерних представлений

В конкретном файле Blade, которому требуется JavaScript, добавьте его в стек скриптов:

@extends('layout')

@section('content')
    
@endsection

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

При такой настройке custom.js будет включаться только при загрузке этого конкретного представления. Этот метод представляет собой чистое решение, которое работает с порядком рендеринга Laravel, гарантируя условное включение файлов JavaScript по мере необходимости.

Где объявить @push?

Размещение операторов @push в представлении Blade имеет значение в первую очередь для читаемости и порядка выполнения. Вот как эффективно использовать @push:

1. Размещение в представлении: хотя вы можете разместить @push в любом месте представления Blade, лучше всего размещать его в конце файла, обычно после содержимого @section. Это позволяет отделить код, связанный со скриптом, от основного контента, улучшая читаемость и удобство обслуживания.

   @extends('layout')

   @section('content')
       
   @endsection

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

1. Порядок нескольких операторов @push: если у вас есть несколько объявлений @push для одного и того же стека (например, @push('scripts')), они будут добавлены в том порядке, в котором они появляются в представлении. Например:

   @push('scripts')
       
   @endpush

   @push('scripts')
       
   @endpush

В этом случае скрипт1.js будет загружаться раньше скрипта2.js, потому что @push добавляет контент в стек в том порядке, в котором он объявлен.

1. Использование @push в партиалах и компонентах: @push также можно использовать в партиалах Blade (например, @include) или компонентах Blade. Это полезно для включения сценариев или стилей, специфичных для представления, непосредственно в повторно используемые компоненты, что упрощает управление зависимостями.

   
   

       
   

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

Когда этот партиал включен в представление, в стек скриптов в файле макета будет добавлен частично-специфический.js.

1. Управляйте порядком с помощью @prepend: если определенные сценарии необходимо загрузить раньше других в том же стеке, вы можете использовать @prepend вместо @push. @prepend помещает содержимое в начало стека, обеспечивая больший контроль над порядком загрузки.

   @prepend('scripts')
       
   @endprepend

   @push('scripts')
       
   @endpush

Здесь Critical.js будет загружаться раньше Non_critical.js, независимо от их размещения в файле Blade.

Ключевые выводы

• Поместите @push в конце представлений для ясности и удобства обслуживания.
• Порядок определяется размещением в представлении, при этом предыдущие операторы @push загружаются первыми.
• @push работает с частями и компонентами, что упрощает включение зависимостей, специфичных для представления.
• Используйте @prepend для скриптов, которые необходимо загрузить первыми в тот же стек.

4. Альтернатива: использование встроенных условных операторов в макете

Если вам нужен более точный контроль над включением JavaScript, условные операторы Laravel позволяют использовать логику на основе маршрутов или переменных непосредственно в макете.

Условное включение на основе маршрута

Вы можете использовать проверки маршрутов непосредственно в макете, чтобы включить JavaScript на основе текущего маршрута:

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

Условное включение на основе переменной

Чтобы условно загружать скрипты на основе переменных, вы можете установить флаг в контроллере или дочернем представлении, а затем проверить его в макете:

1. В вашем контроллере:

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

1. В макете:

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

Этот подход позволяет вам контролировать загрузку JavaScript на основе определенных переменных или маршрутов, обеспечивая гибкость при настройке пользовательских страниц.

Краткое содержание

Вот краткий обзор обсуждаемых методов:

• Глобальное включение: поместите JavaScript в app.js и включите его глобально с помощью @vite.
• Условное включение с помощью Stack и Push: используйте директивы @stack и @push для гибкой модульной обработки скриптов, которая гарантирует загрузку скриптов только в тех представлениях, где они необходимы.
• Условные операторы в макете: используйте проверки на основе маршрутов или переменные контроллера для условной загрузки JavaScript непосредственно в макет.

Эти параметры позволяют точно контролировать загрузку JavaScript, делая ваш проект Laravel 11 эффективным и удобным в обслуживании.