Vite

Can build módulos esse meet o Module Federation carregamento specifications.
Can consuma módulos esse adhere para o Module Federation specifications usando aliases.
Can configure dependências compartilhadas for módulos, so esse quando o host environment do carregado módulo já has o corresponding dependência, it vai não ser carregado again.
Quando um módulo has remote tipos, it automatically downloads e consome o remote tipos.

Unsupported Options

Except para o dev opção, all opções são compatível.

roadmap 🗓️
- Consuming módulos remotos vai have hot update capabilities.
- nuxt ssr

Início rápido

Instalação

Você pode instale o plugin com o seguintes comandos:

npm

yarn

pnpm

bun

npm add @module-federation/vite --save

Crie module-federation.configuração.ts

Crie o module-federation.config.ts arquivo com o seguintes content:

module-federation.config.ts

import { createModuleFederationConfig } from '@module-federation/vite';

export default createModuleFederationConfig({
  name: 'vite_provider',
  manifest: true,
  remotes: {
    esm_remote: {
      type: 'module',
      name: 'esm_remote',
      entry: 'https://[...]/remoteEntry.js',
    },
    var_remote: 'var_remote@https://[...]/remoteEntry.js',
  },
  exposes: {
    './button': './src/components/button',
  },
  shared: {
    react: {
      singleton: true,
    },
    'react/': {
      singleton: true,
    },
  },
});

Register o Plugin

In Vite, você pode adicione o plugin por meio do plugins configuração item no vite.config.js arquivo:

vite.config.js

import { federation } from '@module-federation/vite';
import mfConfig from './module-federation.config';

module.exports = {
  server: {
    origin: 'http://localhost:2000',
    port: 2000,
  },
  base: 'http://localhost:2000',
  plugins: [federation(mfConfig)],
  // Do you need to support build targets lower than chrome89?
  // You can use 'vite-plugin-top-level-await' plugin for that.
  build: {
    target: 'chrome89',
  },
};

Configure o Plugin de build

Tipo: ModuleFederationPlugin(options: ModuleFederationOptions)
O configuração structure para o Module Federation plugin é as follows:

type ModuleFederationOptions = {
  name: string;
  filename?: string;
  remotes?: Array<RemoteInfo>;
  shared?: ShareInfos;
};

Você pode find detailed explanations de all configuração items no Configuration Overview page.

#Vite

#Início rápido

#Instalação

#Crie module-federation.configuração.ts

#Register o Plugin