Files

@msb/mf-utils

Библиотека для настройки микрофронтенда на основе Webpack Module Federation

Установка

npm install --save-dev @msb/mf-utils

Использование

// 1. Создаем экземпляр remote контейнера микрофронта
const remoteContainer = new RemoteContainer({
  url: route.remoteEntryUrl,
  name: route.remoteName,
});
// 2. Загружаем модуль из контейнера
const remoteAppModule = remoteContainer.get({
  name: route.moduleName,
});

// 3. Создаем lazy компонент remote модуля
const RemoteComponent = createRemoteComponent<IRemoteComponentProps>({
  exposedModule: remoteAppModule,
  renderLoader: () => <Loader dataName={`remote-${route.remoteName}`} title={`Загрузка модуля "${route.title}"`} />,
  renderError: ({ error, reload }) => (
    <ErrorEmptyState description={(error as Error).message} title={`Ошибка загрузки модуля "${route.title}"`} onClick={reload}>
      ...
    </ErrorEmptyState>),
});