logologo
Guide
Practice
Configuration
Plugins
Showcase
Blog
Ecosystem
Module Federation Examples
Practical Module Federation
Zephyr Cloud
Nx
简体中文
English
Guide
Practice
Configuration
Plugins
Showcase
Blog
Module Federation Examples
Practical Module Federation
Zephyr Cloud
Nx
简体中文
English
logologo

Getting Started

Introduction
Setting Up the Environment
Quick Start Guide
Feature Navigation
Glossary of Terms
npm Packages

basic

Runtime

Runtime Access
Runtime API
Runtime Hooks
Rsbuild Plugin
Rspack Plugin
Webpack Plugin
Rspress Plugin
Vite Plugin
Metro
Type Hinting
Command Line Tool
Style Isolation

Data Solution

Data Fetching
Data Caching
Prefetch

Frameworks

Modern.js
Next.js

Deployment

Deploy with Zephyr Cloud

Debug

Enable debug mode
Chrome DevTools
Global variables

Troubleshooting

Overview

Runtime

RUNTIME-001
RUNTIME-002
RUNTIME-003
RUNTIME-004
RUNTIME-005
RUNTIME-006
RUNTIME-007
RUNTIME-008
RUNTIME-009

Build

BUILD-001
BUILD-002

Type

Overview
TYPE-001
Other
Edit this page on GitHub
Previous PageRspress Plugin
Next PageMetro

#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.