Скоро! Профессиональный онлайн-курс Vite [HTML Academy]

[EGround]

Профессиональный онлайн-курс Vite [HTML Academy]

Vite — свежий и быстрый инструмент сборки для фронтенда и серверной части приложения.

Vite обладает собственной экосистемой с плагинами, CLI и даже фреймворком для тестирования кода Vitest. Сейчас Vite продолжает стремительно набирать популярность — его используют более трёх миллионов разработчиков по всему миру, поэтому этот инструмент точно стоит изучить.

На курсе познакомимся с основными возможностями Vite и научимся с ним работать.
На курсе рассматривается версия Vite 5.

Типовые задачи, которые вы научитесь решать на курсе:

• Разворачивать Vite-проект с помощью Vite CLI
• Конфигурировать Vite для одностраничных и многостраничных сайтов
• Внедрять препроцессоры и Tailwind для написания стилей
• Оптимизировать графику в контексте Vite
• Разбираться в режимах сборки и средах разработки
• Пользоваться переменными окружения
• Настраивать деплой Vite-проекта на GitHub Pages
• Тестировать код при помощи Vitest
• Устанавливать плагины в Vite для настройки под специфические нужны проекта
• Осознанно подбирать инструменты под каждый проект

Спойлер: Программа курса Раздел 1
Введение
Узнаем, что такое 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 [HTML Academy]», возможно, скоро появится на EGROUND.
Воспользуйтесь поиском, может быть, он уже опубликован.