Vite подключение jQuery
Импортируем npm пакеты в laravel приложение через vite
В настройках docker-compose.yml в сервисе FPM должен быть прописан дополнительный порт для websocketa что бы на нём запускался vite:
fpm:
build:
context: .
dockerfile: docker/Fpm.dockerfile
volumes:
- ./:/var/www/laravel-docker # вся текущая папка пробрасывается в контейнер по пути /var/www/laravel-docker
- type: "bind" # пробрасываем папку /tmp в систему по адресу /tmp (для сохранения логов и профайлов xdebug)
source: "/tmp"
target: "/tmp"
links:
- mysql
ports:
- "9000:9000"
- "3000:3000" # дополнительный порт для websocket/Vite
Устанавливаем все зависимости которые изначально прописаны в package.json
npm install
устанавливаем jQuery через npm
npm i jquery
Импортируем jquery в resources/js/app.js
import jQuery from 'jquery';
window.$ = jQuery;
добавляем настройки порта в vite.config.js
import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';
export default defineConfig({
plugins: [
laravel({
input: [
'resources/css/app.css',
'resources/js/app.js',
],
refresh: true,
}),
],
// Задаём настройки порта для соеденения vite
server: {
hmr: {
host: 'localhost'
},
port: 3000,
host: '0.0.0.0',
},
});
Добавляем подключение js и css фалов в head блейд файла...
@vite(['resources/css/app.css', 'resources/js/app.js'])
И запускаем команду сборки...
npm run build
К переменной $ надо обращаться внутри тега...
<script type="module"></script>
Last updated