Vite - новый король assets в Laravel. Обновление ларавел 9.19.

Сегодня мы максимально понятно для всех разберемся что такое vite, зачем он нам, для тех кто испугался и только привык к mix покажем как вернуть mix, а для всех остальных, кто идет в ногу со временем - разберем плюсы, установим view, поймем как с этим работать локально и на продакшене.
Полезные ссылки:
vitejs.dev
laravel-news.com/webpack-to-vite
github.com/laravel/laravel/co...
#vite#laravel#cutcode
---------------------------------------------------------------------------------
🚀📹👨‍🏫 Как насчет прокачки своих навыков с помощью наших обучающих видеокурсов по web-разработке? Переходи на мой сайт 👇
learn.cutcode.dev/
❗️❗️❗️Присоединяйся к нашему комьюнити в телеграм - там и советом помогут и много интересного - t.me/laravel_chat
🤖🤖🤖Мой помощник Тэйлор готов выдать тебе подарок. Забирать тут - cutcode.ru/chat-bot
---------------------------------------------------------------------------------
⏰ Таймкоды:
00:00 Введение
01:13 Какие произошли изменения в Laravel 9.19
02:44 Если нужно вернуться к webpack.mix
03:26 Как мигрировать старый проект на Vite
03:40 Установка и особенности Vite
05:42 Подключение blade
08:48 Как быть с продакшен?
09:50 Assets
10:35 Подключение vue
14:56 Подведение итогов
Всех поклонников Laravel я приветствую на канале CutCode! Коллеги в этом месяце всего один апдейт вышел для нашего любимого фреймворка, но он интересный и серьезный. Webpack.mix rest in peace в Laravel - как говорится "Король умер! Да здравствует новый король!". Vite - новый король ассетов в laravel. Друзья я не забил в очередной раз на произношение английских слов, просто произносится действительно vite и об этом говорит документация - это французское слово означающая быстрый (quick), да и он действительно быстрый. Сегодня мы максимально понятно для всех разберемся что такое vite, зачем он нам, для тех кто испугался и только привык к mix покажем как вернуть mix, а для всех остальных, кто идет в ногу со временем - разберем плюсы, установим view, поймем как с этим работать локально и на продакшене, ну и немного не в тему, но как говорит L'One - "локти на старт!". Погнали!
Для начала давайте посмотрим на изменения - я установил свежий Laravel версии 9.19 и мы сходу не видим в новом проекте WebPackMix.js. Но зато нас встречает Vite.Config.js. Друзья само собой vite так же как и webpackmix скомпилируют наши front-end asset. И если мы взглянем на первоначальный конфиг vite, то концепция такая же. Есть файлы на входе и они будут компилироваться в готовые бандлы. Давайте откроем старый в Webpack.mix и здесь тоже самое у нас есть файлы на входе, только здесь мы еще указываем куда именно мы будем их компилировать. В vite директория для компилированных файлов в папке public немножко изменилась - добавилась еще директория build, но об этом мы поговорим немного позже. Также изменился package.json - здесь само собой изменились зависимости, убрали mix, добавили vite и изменились команды запуска. Раньше нам нужно было компилировать ассеты с помощью npm run dev prot watch hat и так далее. Теперь суть примерно такая же, но только в двух новых командах vite для локальной разработки и vite build для продакшен. Но при этом компиляция будет в разы быстрее и удобнее при сравнении на средних проектах. Примерно в два раза быстрее. Но и это еще не все.
Окей прежде чем поиграемся с vite, давайте начнем с вопроса - как быть если хочу вернуться к mix. Да друзья причины могут быть и не только в консерватизме а возможно какие-то зависимости не хотят работать с vite.
---------------------------------------------------------------------------------
📹 делитесь этим видео с друзьями:
• Vite - новый король as...
🔔 подпишитесь на KZbin-канал: kzbin.info?s...
📼 Курс по Laravel с нуля:
• Курс по Laravel 8 обуч...
Vite - новый король assets в Laravel. Обновление ларавел 9.19.
---------------------------------------------------------------------------------
🔗 наш сайт: cutcode.ru/
📷 наш instagram: / cutcoderu
📱 Наш telegram-канал: t.me/laravel_cutcode

[@CutCodeRu]

Всех приглашаю в чат CutCode - t.me/laravel_chat . Здесь общаемся и делимся опытом)

[@levdau]

Спасибо за обзор. Осталось только преодолеть сопротивление переменам))

[@CutCodeRu]

держитесь!

[@antohagobet4451]

Спасибо, это как раз то о чем я вас просил снять видео) топ контент по Laravel

[@CutCodeRu]

Да, про vue 3

[@djflorfila1985]

Спасибо Вам большое! Давно не встречал, чтобы так просто, наглядно и чётко всё объясняли! Автор молодец!!! 🤩🤩🤩

[@CutCodeRu]

Спасибо, стараемся! Добро пожаловать к нам

[@eb6006]

Очень оперативно выпустили молодцы! Уже столкнулся конечно поразбирался, но все равно спасибо!

[@timcode3274]

Отличный обзор, спасибо! Продолжай и впредь выпускать подобные видео, это крайне полезно нашему сообществу. Однозначно лайк)

[@CutCodeRu]

Ваши слова нектар

[@archinewtontv1104]

Огнище! Благодарю! Для начинающих идеальный костыль))) всё разжёвано и показано)

[@CutCodeRu]

Старались!

[@ArabicLang.online]

Данил, спасибо за отличный обзор с указанием на особенности. Только вопрос есть по комбинированному подходу с Vue (для SEO, у тебя есть урок), с Vite это тоже работает? Хочется обойтись без SSR, и получить на выходе сайт дружественный для SEO (не SPA), а Vue чтобы был в компонентах, не критичных для SEO. С Mix начал разбираться, потом с обновлением Лары установил и Vite, и запутался на этом.

[@CutCodeRu]

С vite все тоже самое

[@ArabicLang.online]

@@CutCodeRu Спасибо! Значит на mix можно не возвращаться, если не появятся нюансы.

[@JaanPajusalu]

Огромное мерси за подробное объяснение!

[@m.kohone]

Шикардос, спасибо) попробую новый проект перевести на Vite)

[@CutCodeRu]

отпишитесь по результатам

[@m.kohone]

@@CutCodeRu все отлично, перевелось без проблем, сборка в 6 раз быстрее теперь) вместо 80 секунд около 15

[@CutCodeRu]

@@m.kohone огонь

[@ichi-nya]

Работает действительно быстрее. Но очень много проблем.. я два дня потратил просто чтобы запустить простой конфиг - sass, js, font. То файл не находит, то сасс не хочет конвертировать, то шрифт кидает в одну папку, а подключает из другой. Ну и самый шик - подключение шрифтов как модули js. На последнем я пока что остановился, работает и ладно, правда в консоле вылетает ошибка типов.

[@user-zi6in5by1p]

Спасибо, это очень полезно !

[@kekivanovich9222]

Спасибо за видео. Лайк!

[@eduardcaraus4556]

Чувак не угорай крепкого здоровья 🦾Мы скоро не будем нужны пойдём обратно в Макдональдс

[@CutCodeRu]

Вкусно и точка имел ввиду?)

[@socvopros]

Автор, подскажи. Как в VIte объединять файлы в один?

[@arturkhachatryan63]

Привет, можешь сказать что за тема и тема шрифта используешь в PhpStorm ? спасибо

[@CutCodeRu]

Тема Nord, Шрифт Jetbrains mono

[@arturkhachatryan63]

@@CutCodeRu

[@androidiosgameplay-anrad7256]

У меня команда serve не работает, но работает php artisan serve. Как Вы зделали чтобы работала короткая команда?

[@androidiosgameplay-anrad7256]

Если писать код в контроллерах то перезагрузки нет. Можно ли зделать перезагрузку там?

[@avdeyevpavel]

А как подключить bootstrap?

[@thewebpractitioner7498]

Sposibo tebya, a pochemu ti ispolzuysh vue.esm-bundler?

[@mnogokotin]

спасибо за видос )

[@CutCodeRu]

👊

[@ota-ku_official]

СПОСИБО ЛУЧШИЙ!!!😇😇😇😇

[@CutCodeRu]

🙏

[@user-mi2od9gr5x]

Лучшие! Спасибо!

[@CutCodeRu]

🤝

[@collonssaee6202]

Спасибо огромное однозначно! Где ты был когда только вышла обнова?

[@CutCodeRu]

В отпуске)

[@jbv5367]

Полезное видео, спасибо! Только у меня ошибка в console: ut.on is not a function. Но страница грузится. Подскажите в чем причина, буду рад.

[@CutCodeRu]

добрый день! приглашаю в чат t.me/laravel_chat, там на вопросы ответим быстрее!

[@ilhmpost]

очень круто! спасибо за работу! я могу как-то отблагодарить тебя за работу?

[@CutCodeRu]

Лайк и подписка!

[@deniskadet]

чтоб запустилось в sail надо прописать команду ./vendor/bin/sail npm run dev, команда vite не работает

[@sdsd-ec8rw]

14:50 - как называется шрифт?

[@user-fo9tj6vn5q]

Устоновил laravel v 9.42.0 ,в корневой папке нет vite.config.js а в место него bebpack стоит?

[@CutCodeRu]

Badpack

[@CutCodeRu]

Установите с нуля а не обновляйте и будет vite

[@user-fo9tj6vn5q]

Устонавливаю с нуля в терминале! Также проблема (((!

[@eb6006]

Поклонники Laravel приветствуют тебя на канале CutCode ))

[@CutCodeRu]

🥳🥳🥳

[@yuriyovdeyev685]

Скрипач не нужен (с) Пока вижу только гору странных костылей и проблем совместимости.

[@CutCodeRu]

Не без этого

[@catsapp]

Авито на нем можно собрать?

[@CutCodeRu]

Да, авито сразу поставляется из коробки

[@catsapp]

@@CutCodeRu Да блин...

[@pochtaufa]

С inertia.js работает?

[@CutCodeRu]

Да

[@pochtaufa]

@@CutCodeRu подскажи, правильно понимаю что vite дает также SSR для svelte или vue, и этот SSR работает также и при использовании инерции?

[@user-rq4se5pc6i]

Помучился я с этим vite пару дней, у меня не работал build, точнее сама команда работала, но пути к файлу css оставались как при dev, оказывается надо было удалить файл hot чтобы прод заработал🤣 почему нельзя было сказать об этом на видео...

[@CutCodeRu]

Я бы мог сказать об этом но только после твоего комментария)

[@AntonMalevich83]

Этот коммент спас мой день, спасибо!

[@haminidzinanusubalieva6622]

помогите мне запустить пожалуйста, у меня build не слушается

[@ktssergey]

\public\hot

[@yuriyyevlakhov1657]

Люблю Laravel а он любит меня. Значит пытаюсь запустить кашерно Laravel (через Homestead) последнюю версию и тут БАЦ. Vite не работает!!! Танцы, бубны, бубны, танцы. Наверное попробую откатиться на webpack. Про докер думаю даже упоминать не стоит, там на столько все сыро и не доделано, на мой беглый взгляд... Если у Вас не так напишите рецепт как запустить vite не сойти с ума на homestead

[@jbv5367]

сделайте пжл crud и авторизацию с помощью vite

[@trvtrv3172]

Хорошо что я к фронту на ларавел только сейчас подошел

[@user-kd9gj3vz7p]

"vite" не является внутренней или внешней командой, исполняемой программой или пакетным файлом.

[@arturtsoi6555]

Установи vite через npm. Или "npm run dev"

[@eduardcaraus4556]

Я не знаю что учить , учишь одно , потом это не нужно изучаешь другое. ))

[@CutCodeRu]

Бесконечный процесс обучения и это прекрасно!

[@eduardcaraus4556]

@@CutCodeRu Согласен бро

[@martingerman2457]

Похоже никто не заметил, но у vite никакого hot reloading нет, есть HMR, на их сайте так это и написано. Я замечал что этот hmr не всегда корректно работает, в некоторых случаях при изменении разметки и/или стилей все может смешаться и поможет только F5, думаю это стоило рассказать и показать хотя бы 1 такой случай. А так, в общем видео полезное, гж!

[@user-jd6yz2vf6f]

Тема шторма какая?

[@CutCodeRu]

Nord

[@eduardcaraus4556]

Скоро и ты не будешь нужен с Laravel твоим ))) Есть уже искусственный интелект который сам пишет код .

[@CutCodeRu]

Ты опоздал, этот канал и есть ИИ