Установка AlpineJS по умолчанию в проекте Sail Livewire
Мой вопрос возникает из простого любопытства, поскольку я хотел бы иметь контроль над версиями зависимостей моего проекта. Недавно я начал работать над проектом laravel/livewire, установленным с помощью Sail. Я заметил, что есть некоторые функции пользовательского интерфейса, которые гораздо лучше обрабатываются облегченной средой js, поэтому я остановился на AlpineJS. Я установил его с помощью npm, и все работало нормально, пока в какой-то момент я не начал получать странные неперехваченные ошибки исключений. Посмотрев вокруг, во многих местах решением было убедиться, что AlpineJS не загружается несколько раз. Поэтому я удалил свою регистрацию Alpine из app.js, и, к моему удивлению, все по-прежнему работало как положено, без ошибок. Я пытался найти источник установки AlpineJS, но не смог ее найти. В проекте нет тегов сценариев и нет импорта с использованием URL-адреса CDN. Интересно, установлен ли он каким-то глобальным образом в контейнере (хотя он все равно должен где-то инициализироваться).
Есть ли здесь какой-нибудь гуру livewire/alpinejs, который мог бы сказать мне, где искать, или дать мне представление о том, как это работает?
Это не конец света, но, как я уже сказал, я хотел бы иметь контроль над тем, какая версия alpinejs будет использоваться после развертывания. А также полезно знать, как работают определенные вещи в рамках. Спасибо.
Если вы найдете там alpine, проверьте соответствующий файл lock.json, чтобы проверить текущую установленную версию.
Ответы 1
Livewire v3 поставляется с установленным по умолчанию Alpinejs. Однако вы можете загрузить его вручную.
Для этого вам необходимо добавить директиву @livewireScriptConfig в файл макета (resources/views/components/layouts/app.blade.php):
<html>
<head>
<!-- ... -->
@livewireStyles
@vite(['resources/js/app.js'])
</head>
<body>
{{ $slot }}
@livewireScriptConfig
</body>
</html>
Когда Livewire обнаружит директиву @livewireScriptConfig, он воздержится от внедрения сценариев Livewire и Alpine. Если вы используете директиву @livewireScripts для загрузки Livewire вручную, обязательно удалите ее. Обязательно добавьте директиву @livewireStyles, если ее еще нет.
Последний шаг — импорт Alpine и Livewire в ваш файл app.js, что позволит вам зарегистрировать любые пользовательские ресурсы и, в конечном итоге, запустить Livewire и Alpine. Вы также можете установить предпочитаемую версию Alpinejs через npm и импортировать ее в app.js, как показано:
import { Livewire, Alpine } from '../../vendor/livewire/livewire/dist/livewire.esm';
import Clipboard from '@ryangjchandler/alpine-clipboard'
Alpine.plugin(Clipboard)
Livewire.start()
Это совместимо только с Vite, но не с миксом Laravel.
Спасибо, Дидвиз, теперь это имеет смысл. Однако загружать зависимость javascript из папки поставщика не очень идеально, им следовало бы придумать лучшее решение, чтобы отсоединить ее от livewire, но это только мое мнение.
проверьте композитор.json или package.json (скорее всего, package.json)