⚡️ Vite - Быстрая Сборка JavaScript Проектов | Полный курс
HTML-код
- Опубликовано: 19 июн 2024
- Курс по разработке современных frontend проектов с помощью сборщика нового поколения Vite.
Telegram - t.me/igorbabko_dev
🧪 Репозиторий: github.com/igorbabko/builds-w...
🧪 Исходные коды для каждого урока: github.com/igorbabko/builds-w...
🎨 Тема VS Code:
marketplace.visualstudio.com/...
🎨 Иконки VS Code:
marketplace.visualstudio.com/...
marketplace.visualstudio.com/...
✍️ Шрифт:
philpl.gumroad.com/l/dank-mono
www.jetbrains.com/lp/mono/
🍿 Весь плейлист: • Vite - сборщик нового ...
👀 Другие курсы:
Vue Composition API с нуля: • Vue Composition API с ...
Кастомная настройка Tailwind CSS: • Кастомная настройка Ta...
Tailwind CSS + JIT компилятор: • Tailwind CSS + JIT ком...
Лендинг Tesla на Tailwind CSS: • Лендинг Tesla на Tailw...
Верстка RUclips на Tailwind CSS: • Tailwind CSS RUclips к...
RUclips клон на Vue 3 и Tailwind CSS: • RUclips клон на Vue 3 ...
Настройка VS Code: • Настройка VS Code
#vite #vitejs #javascript #bundler #frontend
🕛 Тайм-коды:
00:00 - Установка Vite
06:04 - Импорт NPM модулей
14:03 - Импорт CSS файлов
18:30 - Импорт CSS модулей
24:07 - PostCSS плагины (Tailwind CSS)
28:20 - CSS препроцессоры
31:51 - Импорт JSON файлов
33:39 - Импорт файлов
36:54 - Папка public
43:12 - Glob импорты
50:14 - Именованные glob импорты
53:57 - Поддержка JSX синтаксиса
01:04:40 - TypeScript
01:09:52 - ESLint
01:13:22 - Псевдонимы путей
01:17:10 - Переменные окружения
01:25:53 - Сборки для многостраничных приложений
01:33:15 - Режим сборки библиотеки
01:46:21 - Сборка библиотек с несколькими точками входа
01:52:31 - Импорт модулей библиотеки с помощью require
01:56:46 - Сторонние зависимости в собственных библиотеках
02:03:18 - Публикация пакета в NPM репозитории
02:12:53 - Оптимизация картинок
02:18:17 - Создание плагина
02:28:01 - Конфигурация плагина
02:37:11 - Конфигурация сервера
02:44:59 - Горячая замена модулей (HMR)
02:56:02 - Взаимодействие клиента и сервера
03:02:01 - Метод hot.accept()
03:10:35 - Метод hot.dispose()
03:19:28 - Интеграция Vue
03:24:22 - Интеграция React
03:30:19 - Деплоймент Vite проекта
Telegram - t.me/igorbabko_dev
Господи, для людей который «зрят в корень» это просто кладесь знаний. Спасибо тебе огромное за такую проделанную работу. Подача размеренная и слушать приятно! Однозначно лайк подписка)
Большое спасибо за благодарность, поддержку и подписку! Рад слышать, что Вам понравился курс)
в точку. сразу отмотал куда нужно и можно работать, спасибо автору!
@@ilya7435 а я до сих пор делаю конспекты в вёрде со скриншотами через LightShot))))))))))))))))))))))))))))))))))
Спасибо было полезно. Проделана колосальная работа!
Всегда пожалуйста!
Как и всегда, тонны полезной информации. Отдельная благодарность за объяснение темы proxy в разделе "Конфигурация сервера"! Большое спасибо за Ваш труд!
Благодарю за обратную связь) всегда пожалуйста!
Отличное курс, самый детальный разбор. Спасибо за приложенные усилия !
Всегда пожалуйста)
Крутой урок, спасибо что все разложил по полочкам,продолжай в том же духе не сдавайся,однозначно подписка и лайк 🔥🔥🔥🔥🔥🔥🔥🔥
Благодарю за поддержку и подписку!
Не понимаю хейта в комментах. Слушать приятно, рассказывает автор очень понятно и информация отлично структурирована. Разве это не прекрасно, когда у человека своя изюминка в манере речи есть?
Никого не слушай, отличная подача. Удачи в развитии канала, не бросай - своего зрителя ты точно найдешь
Влепил подписку лайк с двух ног
Большое спасибо за поддержку и подписку! Буду стараться регулярно выкладывать видео)
Большое спасибо автору за круто составленный и детальный разбор такого инструмента! Жаль, что действительно желающих разобраться людей кратно меньше, чем любителей шортсов, но тут каждый лайк более, чем заслуженный )) Успехов!
Благодарю Вас за мотивирующий комментарий!
Привет. У тебя просто замечательный канал. Долго искал что-то подтянуть знания по VUE, VITE, и пр. Наткнулся на этот канал чудом. Доделаю свой проектик, и примусь просматривать твои ролики.
Твои видео почему-то довольно плохо гуглятся как из поисковиков, так и в самом RUclips. Если сделаешь что-нибудь с этим, просмотры пойдут вверх. Если беглым взглядом, все что нужно у тебя есть. Поставленный голос, комфортный темп подачи, сама подача. Удачи)
Привет) Большое спасибо за исчерпывающий отзыв) Приятного просмотра! Буду постепенно пробовать разные методы для увеличения количества просмотров, еще раз спасибо!
Курс прям круто❤
Рад слышать!
Лучший!
Благодарю за поддержку)
16:02
небольшое дополнение
функция __vite__updateStyle это алиас для updateStyle(id, content) которая в свою очередь выполняет
style = document.createElement('style');
style.setAttribute('type', 'text/css');
style.textContent = content;
document.head.appendChild(style);
Благодарю за дополнение!
Той момент коли люди пишуть за якись незрозумілий тон та наголосні, дивлячись контент для навчання тай щей у програмувані, де саме головне це інформація та результат, а не наголосні і тон. Люди ви прийшли не подкаст слухати і не шоу дивитися... Куди цей світ котиться. Автор топ, контент якісний, наснаги та витримки вам ✌ .
Благодарю Вас за поддержку и активность в комментариях!)
Игорь, большое Вам спасибо за курс! Я смог быстро освоить базу по vite и приступить к работе
P.S Продолжайте в том же духе!
Рад слышать! Спасибо большое за поддержку!
Спасибо!
Всегда пожалуйста!
крутяк, очень качественный контент 👍
Спасибо большое)
Господи спасибо, что я нашёл это видео
Благодарю за подписку, и приятного просмотра!)
Когда мы деплоим на github pages, то при маршрутизации в React всегда нужна указывать путь с значением свойства base из конфигурации vite.config? Пример:
path="repository"
path="repository/contacts"
И так же с Link to?
Честно говоря, я сам не пробовал, но, вероятно, что нужно переопределять свойство base в файле vite.config.js
Вот статья по этому поводу, которая может прояснить ситуацию - blog.devgenius.io/how-to-deploy-your-vite-react-app-to-github-pages-with-and-without-react-router-b060d912b10e
а можно использовать jsx без React? информации в сети почти нет об этом
Да, можно) JSX это своего рода спецификация - github.com/facebook/jsx, поэтому можно написать свою реализацию этой спецификации. Самая популярная реализация спецификации JSX на данный момент это та, что используется в React-е.
Как раз в этом уроке ruclips.net/video/evmIHSAn1AU/видео.html был разобран простейший пример реализации JSX спецификации (просто в целях обучения).
Дякую, за твою роботу! Чудово все розповів. Чи плануєш знімати відео про Nuxt 3?
Всегда пожалуйста! Да, планирую делать видео и по Nuxt, пока точно не знаю, когда именно)
Обзор качественный - хоть сеньором по нему сразу не станешь)))
Хаха, благодарю!))
Я думаю это крутая штука, что бы писать что то вроде своей библиотеки
Тоже считаю, что библиотеки разрабатывать интересно)
Это просто титаническая работа. Почему бы вам не завести бусти с платными курсами?
перед этим нужно хорошую базу
Спасибо большое за то, что цените мою работу! Я очень рад)
Я хочу создать какой-то образовательный ресурс с видео курсами и уроками, или использовать тот же бусти, как получится) Это все в планах.
Но, даже после создания платной платформы, буду продолжать делать бесплатные видео на RUclips. Еще раз спасибо!
Вы имеете в виду большую аудиторию?
Привет, а как можно в html импортировать другой html? Подскажи, пожалуйста
Привет) рекомендую посмотреть в сторону шаблонизатора Handlerbars, или какого-то другого) Шаблонизаторы позволяют собирать HTML страницы с отдельных составляющих - stackoverflow.com/a/70920064
Вот плагин для интеграции Handlerbars с Vite - github.com/alexlafroscia/vite-plugin-handlebars
Вот еще инструмент, который, по всей видимости, позволяет работать с разными шаблонизаторами в Vite проектах, только я его не использовал)
vituum.dev/
Да просто Gulp можно использовать для импорта html
Как тема vsc называеться?
Тема VS Code: marketplace.visualstudio.com/items?itemName=JoseMurilloc.aura-spirit-dracula
Иконки VS Code: marketplace.visualstudio.com/items?itemName=PKief.material-icon-theme
На канале есть плейлист по моей настройке интерфейса VS Code (как раз в первом видео применяется данная тема) - ruclips.net/p/PL-FhWbGlJPfZmjF9sLoSVAF4-9R1cSXxo
re. 1:01:14 почему мой девтулз показывает мне все содержимое div class="wrapper" без необходимости outerHTML? с outerHTML выводит все содержимое как текст в одну строку
Я так понимаю, Вы используете Chrome? Похоже, это еще зависит от браузера. Попробуйте так - console.dir(template)
@@igorbabko да, верно, в хроме. dir-то, конечно, показал свойства элемента, не знал что от браузера зависит. Благодарю. Шикарное видео.
Понял) спасибо!
можно ли на vite полноценно перейти с галпа? при этом сохранив структуру проектов
Точно не скажу, сам не пробовал) Как и для Gulp, так и для Vite, на сегодняшний день существует множество плагинов. Практически уверен, что все, что можно сделать с помощью Gulp, можно сделать и с помощью Vite.
Думаю, структуру проекта менять не прийдется.
У Вас в проекте используются CommonJS или ESM модули?
@@igorbabko в проектах используется ESM. Я столкнулся с проблемой структуры проекта в первые когда начал пробовать vite. сделать директорию для js "./dist/assets/sctipts/bundle.js" немного сложнова-то в vite.
Если используются ESM модули, то будет проще. И как в итоге, получилось, или решили пока не переходить?)
@@igorbabko очень хочется, но пока что очень сложно. либо мои задачи проекта немного не подходят для vite, либо я слабо еще в нем разобрался)
В любом случае, желаю успехов в изучении!
Класс 👍
Благодарю за поддержку!
Видно , что автор шарит в теме, но подача не очень. Быстро, запутанно, монотонно.
С каждым новым видео стараюсь улучшать вышеперечисленные характеристики)
Не тяни гласныеееее в конце предложенияяяяя или в конце каждой мыслиииии, это отвратительно звучииииит. А тут ещё ты пытаешься тянуть согласные (!), это вообще пц.
Благодарю за обратную связь) делаю как могу, но с каждым новым видео стараюсь улучшать и произношение, и качество видео, и все остальное)
Дурачек?
@@grantorino3465 это ещё почему?
@@ArthurMudrick потому что, если тебе что-то там кажется, это не означает, что нужно автору какие-то предьявы закидывать. Не комфортно? Не смотри. Смотри там, где тебе все понятно и приятно.
@@grantorino3465 алло, мне ничего там не кажется, я всё прекрасно отчётливо слышу, алло, может у тебя со слухом не в порядке?
инфа класс, но слушать тебя трудно, меня на 10 минут хватило и начало дергать от перекатывания твоего голоса с высокого на низкий.
Благодарю за обратную связь) делаю как могу, но с каждым новым видео стараюсь улучшать и произношение, и качество видео, и все остальное)