• English

      • Vite

      • 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.
      • When a module has remote types, it automatically downloads and consumes the remote types.
      Unsupported Options

      Except for the dev option, all options are supported.

      • roadmap 🗓️
        • 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.