Введение
Узнаем, что такое Vite и рассмотрим его возможности. Познакомимся с Vite CLI и развернём базовую сборку на Vite.
— Что такое 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
— Ещё больше возможностей
— Финал
— Тест по курсу
Узнаем, что такое Vite и рассмотрим его возможности. Познакомимся с Vite CLI и развернём базовую сборку на Vite.
— Что такое 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
— Ещё больше возможностей
— Финал
— Тест по курсу
Для просмотра скрытого содержимого необходимо Войти или Зарегистрироваться.