mfe-federation-config

Общая конфигурация Module Federation для системы микрофронтендов (Webpack Module Federation: React host/remote + Vue 3 remote).

Единый источник правды о федерации, который потребляют приложения host, remote и vue.

Содержимое

• src/federation.manifest.js — манифест федерации: remotes (URL контейнеров из env-переменных REMOTE_URL / VUE_URL с localhost-дефолтами), exposes (какие файлы экспонирует каждое приложение + kind: react/vue/runtime), consumes (кто кого потребляет) и хелперы webpackRemotes(app) / webpackExposes(app).
• src/webpack.base.js — фабрика createConfig(...) и пресеты шаред-синглтонов sharedReact (react, react-dom) / sharedVue (vue). Централизует output.publicPath: "auto", output.clean и настройки dev-сервера (порт, historyApiFallback, allowedHosts, CORS-заголовки, client.webSocketURL).
• src/bin/generate-federation-types.js — CLI, генерирующий src/types/federation.d.ts для текущего приложения (ambient-декларации потребляемых федеративных модулей). Имя приложения выводится из рабочей директории.

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

const { ModuleFederationPlugin } = require('webpack').container;
const {
  createConfig,
  sharedReact,
  webpackRemotes
} = require('mfe-federation-config');

module.exports = createConfig({
  ModuleFederationPlugin,
  name: 'host',
  port: 3000,
  remotes: webpackRemotes('host'),
  shared: sharedReact
  /* ... */
});

Генерация федеративных типов (запускать из каталога приложения):

npx generate-federation-types

Переменные окружения

| Переменная | Значение по умолчанию | Где используется | | ------------ | ----------------------- | ---------------- | | REMOTE_URL | http://localhost:3001 | host | | VUE_URL | http://localhost:3002 | remote |

URL запекаются в бандл на этапе сборки (Docker ARG/ENV в CI).

Лицензия

MIT © AlexDyatlov