Вместо того чтобы начинать с того, что и как мы делали, позвольте мне начать с того, почему.

Почему мы это сделали

Раньше мы создавали интерфейсные приложения в виде монолита, где все тесно связано для этого конкретного приложения.
Что хорошо, это дало нам надлежащий объем индивидуального приложения. Затем мы начали расширять масштаб до нескольких стран и различных приложений. В каждой стране разная конфигурация, например, разная мобильная проверка, разные правила, а иногда и разные требования.
Мы решили не обрабатывать разные репозитории для разных стран, так как там много дублирования кода. Поэтому мы решили использовать конфигурацию, основанную на том, что мы вводим файл конфигурации, специфичный для страны, когда эта конкретная страна загружается. Какие есть все общие вещи, необходимые для этой страны?
Это решение правильное, но в процессе разработки мы столкнулись с несколькими критическими проблемами, такими как:

  1. Лестница if else - мы получили в коде много условий if-else
  2. Тестирование - всякий раз, когда конкретная страна вносит какие-либо изменения, каждая страна должна протестировать ее (поскольку это единая кодовая база).
  3. Фиксация кода. Раньше возникало много конфликтов, так как многие разработчики работают в разных странах.
  4. Завершить модуль в другом приложении - Иногда нам нужен модуль из приложения A в приложение B (которое мы использовали iframe)

Поэтому мы решили расширить это решение, которое может решить по крайней мере несколько проблем. В ходе этого процесса мы придумали архитектуру на основе плагинов, в ходе которой многому научились.

Как мы сделали

Возьмем приложение (монолитное), в котором есть такие модули, как пользователи, уведомления, настройки, лента новостей и некоторая бизнес-логика.

Чтобы внести какие-либо изменения в бизнес-логику, мы должны разорвать модули, внести изменения и вернуть их с помощью множества условий if-else. Поэтому мы разбили каждый модуль на отдельное приложение, чтобы любое другое приложение могло его использовать.

(ядро - это то, что контролирует все плагины)
Теперь мы можем работать с каждым модулем отдельно и публиковать их как отдельный пакет. Любое приложение Vue может использовать их при необходимости.

В идеале это то, о чем мы говорим

  1. vue создать демо-приложение
  2. npm i @ myapp / users @ myapp / notifications @ myapp / settings @ myapp / core -save
  3. запустить основной модуль
  4. Добавьте несколько конфигураций

Это все модули, внедренные в приложение и готовые к работе в браузере. Выглядит здорово и красиво, но как это сделать?
Итак, прежде чем достичь этого уровня, нам нужно понять несколько проблем, которые мы решили на этом пути. Объединив все эти решения, мы можем получить ответ на наш вопрос.

  1. Работа с несколькими репозиториями (или монорепозиториями)
  2. Сборка подключаемого модуля
  3. Внедрение плагинов
  4. 3 основных уровня фронтенд-разработки
  5. "Супер финал"