Микро-интерфейсы: использование модулей окружения TypeScript
webpack microfrontend single-spa

Микро-интерфейсы: использование модулей окружения TypeScript

24 декабря 2022 г.

Я работаю над проектом, в котором мы разбиваем монолитное приложение на серию микрофронтендов, используя single-spa. Single-Spa — это фреймворк микроинтерфейса.

Наш проект использует внешние веб-пакеты для обработки определенных зависимостей как встроенных в браузер модулей. Это означает исключить их во время сборки и ожидать, что браузер предоставит их во время выполнения.

Single-spa предоставляет отличную документацию о том, как этого добиться.

Проблема, с которой я столкнулся, заключается в том, что ваша IDE не знает об этой настройке во время разработки.

uh-oh! module not found

На изображении выше моя IDE показывает предупреждение «Модуль не установлен».

Это связано с тем, что @effectv-platform/ep-ui-auth — это микроинтерфейс. Я импортирую экспортированную функцию из этого микроинтерфейса под названием useAuth. Это не пакет, опубликованный в npm, объявленный в package.json проекта и установленный в папке проекта node_modules.

Этот модуль является встроенным в браузер модулем, предоставляемым картой импорта.

Вы можете опубликовать свои микроинтерфейсы в менеджере репозитория и объявить их в вашем package.json. Это установит их в вашу папку node_modules, и ваша IDE будет счастлива.

В качестве альтернативы можно использовать функции «окружающего» модуля TypeScript.

Вы создаете файл <name>.d.ts в своем проекте и добавляете объявление для этого модуля. Файл должен заканчиваться на .d.ts. Вы также можете экспортировать интерфейсы и функции из объявления этого модуля.

У нас был существующий файл node.d.ts в нашем проекте. Я обновил этот файл, включив в него приведенный ниже код. Этот код добавляет объявление для модуля @effectv-platform/ep-ui-auth.

declare module '@effectv-platform/ep-ui-auth'{
    export function useAuth(): {signIn, signOut};
}

Недостатком этого подхода является то, что вы должны определить и поддерживать этот файл объявления в каждом микроинтерфейсе, который в нем нуждается. Это нарушает принцип «Не повторяйтесь» (DRY) и может привести к проблемам с обслуживанием.

Для простых сценариев и при первом планировании проекта это может быть приемлемо.

Оригинал

Recent Post

Categories

PREVIOUS ARTICLE
NEXT ARTICLE