Микрофронтенды с НУЛЯ - Быстрый Старт

Микрофронтенды с нуля — в этом видео я покажу, как шаг за шагом создать микрофронтенды на React и Vue с использованием TypeScript, Webpack и Module Federation. Мы разберёмся, как экспортировать и импортировать компоненты, настроить интеграцию Vue в React, а также исправить типовые ошибки TypeScript. Репозиторий с кодом по ссылке в комментариях 📌 Тайм-коды: 00:00 Вступление 00:18 Создаём первый микрофронтенд 01:07 Создаём второй микрофронтенд 01:52 Открываем микрофронтенды в браузере 02:28 Добавляем CSS стили 03:09 Создаём компонент в удалённом микрофронтенде 03:58 Экспортируем компонент из микрофронтенда 05:34 Разбираемся с remoteEntry.js 06:06 Импортируем удалённый микрофронтенд в корневой 07:20 Смотрим на результат импорта 08:31 Создаём третий микрофронтенд на Vue 09:27 Создаём компонент со счётчиком 11:30 Экспортируем Vue компонент (Counter) 14:02 Создаём обёртку для импорта Vue компонента в React 16:30 Импортируем обёртку в remote микрофронтенд 16:43 Смотрим на результат импорта Vue в React 17:02 Исправляем TypeScript ошибки, пишем декларацию модулей 19:44 Подводим итоги работы В этом видео вы узнаете: Как создать микрофронтенды на React и Vue. Что такое Module Federation и как с ним работать. Как интегрировать Vue компоненты в проекты на React. Как задекларировать удалённый модули с помощью TypeScript'а #microfrontends #programming #webpack

Смотрите также