Guide
Practice
Configuration
Plugins
Showcase
Blog
Guide
Practice
Configuration
Plugins
Showcase
Blog

Vite Plugin

  • Can build modules that meet the Module Federation loading specifications.
  • Can consume modules that adhere to the Module Federation specifications using aliases.
  • Can configure shared dependencies for modules, so that when the host environment of the loaded module already has the corresponding dependency, it will not be loaded again.
Unsupported Options

Except for the dev、dts options, all options are supported

  • roadmap 🗓️
    • When a module has remote types, it will automatically download and consume the types of the remote modules.
    • Consuming remote modules will have hot update capabilities.
    • nuxt ssr

Quick Start

Installation

You can install the plugin with the following commands:

npm
yarn
pnpm
bun
npm add @module-federation/vite --save

Register the Plugin

In Vite, you can add the plugin through the plugins configuration item in the vite.config.js file:

vite.config.js
import { federation } from '@module-federation/vite';
module.exports = {
  server: {
    origin: 'http://localhost:2000',
    port: 2000,
  },
  base: "http://localhost:2000",
  plugins: [
    federation({
      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,
        },
      },
    }),
  ],
  // 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 the Build Plugin

  • Type: ModuleFederationPlugin(options: ModuleFederationOptions)

  • The configuration structure for the Module Federation plugin is as follows:

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

You can find detailed explanations of all configuration items on the Configuration Overview page.