Описание курса:
Vite — свежий и быстрый инструмент сборки для фронтенда и серверной части приложения.
Vite обладает собственной экосистемой с плагинами, CLI и даже фреймворком для тестирования кода Vitest. Сейчас Vite продолжает стремительно набирать популярность — его используют более трёх миллионов разработчиков по всему миру, поэтому этот инструмент точно стоит изучить.
На курсе познакомимся с основными возможностями Vite и научимся с ним работать.
На курсе рассматривается версия Vite 5.
Курс поможет вам получить востребованный навык и повысить свою ценность на рынке
После курса вы сможете создавать собственные сборки и менять конфиги в рабочих проектах. Вы станете тратить меньше времени на разработку — Vite снимет с вас часть рутинных задач.
Ваши приложения станут быстрее, ведь вы научитесь оптимизировать код и сжимать размер файлов или шрифтов перед деплоем проекта.
Типовые задачи, которые вы научитесь решать на курсе:
- Разворачивать Vite-проект с помощью Vite CLI
- Конфигурировать Vite для одностраничных и многостраничных сайтов
- Внедрять препроцессоры и Tailwind для написания стилей
- Оптимизировать графику в контексте Vite
- Разбираться в режимах сборки и средах разработки
- Пользоваться переменными окружения
- Настраивать деплой Vite-проекта на GitHub Pages
- Тестировать код при помощи Vitest
- Устанавливать плагины в Vite для настройки под специфические нужны проекта
- Осознанно подбирать инструменты под каждый проект
Программа построена так, чтобы вы постепенно углубляли знания.
Раздел 1. Введение
- Что такое Vite
- Vite CLI
- Основные возможности Vite
- Демо: zero-config сборка
Практика
- Задание: установка Vite
- Решение: пошаговая эталонная реализация
- Тест по материалам раздела
Раздел 2. Погружение в конфигурацию Vite
Познакомимся с конфигурационным файлом для Vite и организацией файловой структуры в проекте. Узнаем, как можно собирать стили и работать с графикой в контексте Vite.
- Структура файлов проекта
- Сборка стилей
- Работа с графикой
- Сборка мультистраничного сайта
- Демо: написание сборки для одностраничного сайта
- Демо: написание сборки для мультистраничного сайта
- Демо: транспиляция, минификация и сорсмапы
Практика
- Задание: пишем свою сборку на Vite
- Решение: пошаговая эталонная реализация
- Тест по материалам раздела
Раздел 3. Режимы разработки и деплой
Рассмотрим понятие окружения в разработке. Какие бывают окружения и как они работают в контексте Vite. Узнаем, что такое переменные окружения и как ими управлять. Изучим деплой Vite-проекта на GitHub Pages.
- Режимы сборки
- Переменные окружения
- Деплой Vite проекта на GitHub Pages
- Демо: режимы сборки
- Демо: используем переменные окружения
Практика
- Задание: используем переменные сборки и настраиваем режимы разработки. Загружаем свой проект на GitHub Pages
- Решение: пошаговая эталонная реализация
- Тест по материалам раздела
Раздел 4. Vitest. Тестируем код с помощью Vite
Изучим фреймворк Vitest, его особенности и примеры использования. Рассмотрим основные концепции, методы, функции. Протестируем компонент.
- Vitest — установка и настройка
- Vite test — тестируем код
- Демо: тестируем компонент счётчика
Практика
- Задание: добавляем Vitest в проект
- Решение: пошаговая эталонная реализация
- Тест по материалам раздела
Раздел 5. Дополнительные возможности
Познакомимся с некоторыми плагинами для Vite. Узнаем про алиасы и настроим их в проекте. Рассмотрим интеграции Vite с фронтенд-фреймворками и затронем тему сборки PWA.
- Плагины в Vite
- Алиасы в Vite
- Интеграция с фреймворками и инструментами
- Демо: добавляем плагин в сборку
Практика
- Задание: используем плагины в сборке
- Решение: пошаговая эталонная реализация
- Тест по материалам раздела
Раздел 6. Заключение и миграция с Gulp
Рассмотрим аспекты миграции с Gulp, порассуждаем о сборщиках кода. Подведём итоги курса.
- Gulp и Vite. Соотношение инструментов
- Основные аспекты миграции с Gulp на Vite
- Ещё больше возможностей
- Финал
- Тест по курсу
Скачать [HTML Academy] Профессиональный онлайн-курс Vite (2024)
Чтобы скачать курс, новым пользователям, необходимо Пройти Регистрацию
Если у вас уже есть аккаунт Войти на Форум
Симпатии:
Это понравилось mafalepron