В моем предыдущем посте я рассказал, как создать базовое микро-интерфейсное приложение hello-world, в котором используется использование webpack и React для интеграции компонентов во время выполнения.
Эта статья будет продолжением этой статьи, поэтому, если у вас не было возможности прочитать ее, откройте указанную выше в новой вкладке и вернитесь сюда, когда закончите.
Мотивация
Зачем вам добавлять Vue (или другой фреймворк) в свой микро-интерфейс на основе React? Я могу вспомнить несколько причин:
- Предоставление командам автономии над стеком технологий.
- В конечном итоге React может потерять благосклонность сообщества разработчиков, и может появиться новая лучшая блестящая вещь. Знание, что мы можем преобразовать наше приложение по крупицам, вселяет в нас уверенность в завтрашнем дне.
- Vue (или другой фреймворк) может дать вам что-то уникальное, чего нет в React.
Лично я считаю, что слишком большая автономия между командами может быть опасна. Вы можете закончить разработку «новой блестящей технологии» для каждой из ваших функций, а это означает, что вы, вероятно, получили много кода начального уровня от ваших опытных инженеров. Это также приводит к разрозненности и трудностям при смене команд. Ваше приложение также немного пострадает от загрузки дополнительного фреймворка.
Это всего лишь мои плюсы и минусы. Ваша ситуация будет уникальной, поэтому сначала продумайте варианты.
Создание helloVue
Надеюсь, я вас не оттолкнул, а вы все еще читаете. Мы собираемся начать с создания очень простого приложения hello Vue на его собственном порте. Создайте новое репо (или подпапку) с именем helloVue.
Поскольку на этот раз мы используем Vue, в package.json есть несколько разных зависимостей:
Обязательно сделайте npm install, когда получите это. Затем мы скопируем файл public / index.html и изменим идентификатор, к которому мы будем подключаться.
Теперь давайте добавим наши srcfiles. Создайте новую папку scr и три новых файла: index.js (который может быть копией из helloReact), bootstrap.js и App.vue.
Как видите, здесь мы делаем то же самое, что и в приложении helloReact. Мы монтируем наше приложение в файл bootstrap.js и импортируем этот файл в index.js, чтобы webpack мог асинхронно управлять любыми общими зависимостями. Файл vue - это просто простой пример hello world, который я быстро запустил. Я ничего не знаю о Vue, так что, надеюсь, я не сделал ничего слишком непростительного в 13 строках кода :)
Я думаю, что мы готовы запустить приложение, поэтому давайте скопируем конфигурацию нашего веб-пакета из helloReact и внесем несколько незначительных изменений.
Конфигурация разработчика почти такая же, за исключением того, что мы изменили наш порт на 8082 и изменили значения name и exposes на «helloVue» и «./HelloVueApp» соответственно.
В общую конфигурацию внесено несколько изменений специально для того, чтобы Vue работал. Мы добавили VueLoaderPlugin и убедились, что webpack может разрешать .vue файлы. Это общая конфигурация, так как нам нужно будет использовать ее и в производственной среде.
Так и должно быть! Давайте запустим наш терминал и наберем npm start из папки helloVue. Переход к http://localhost:8082 в браузере должен выглядеть так:
Интеграция с нашим контейнером Micro Frontend
Отлично, так что работает независимо! Теперь давайте интегрируем его в наше контейнерное приложение. Все изменения, которые мы собираемся здесь внести, будут в нашей container папке.
Прежде всего, давайте добавим новый пульт для нашего приложения helloVue в файл webpack.dev.js:
Теперь мы можем использовать его в нашем контейнерном приложении. Давайте создадим новый компонент, который мы сможем отобразить в контейнере. Создайте новый файл src/components/HelloVueApp.js, который должен выглядеть примерно так же, как HelloReactApp, за исключением того, что нам не нужно ничего делать с навигацией, поэтому это немного проще:
Вам может быть интересно, почему здесь используется React. Если вы помните, как helloReact, так и приложение-контейнер основаны на React.
Наконец, все, что нам нужно сделать, это добавить маршрут, который загрузит этот компонент в наш src/App.js файл:
Теперь у нас должна быть возможность запускать все наше микро-интерфейсное приложение. Сначала вам нужно убедиться, что два дочерних приложения работают, поэтому перейдите к их папкам и запустите npm start для каждого из них. Затем в папке контейнера вы можете запустить npm start, и ваше приложение должно загрузиться на http://localhost:8080. Должно получиться так:
Я знаю, что это не так уж много, но это действительно захватывающе! Вы запускаете приложение Vue в своем микро-интерфейсе React.
Если у вас возникли какие-либо проблемы, вы можете найти исходный код этого руководства на github.
Ознакомьтесь с следующей статьей в этой серии, в которой рассказывается, как развернуть приложение в производственной среде с помощью действий AWS и GitHub.
Если вы думаете о присоединении к среде, пожалуйста, воспользуйтесь моей реферальной ссылкой - https://richard-t-bell90.medium.com/membership
