logologo
指南
实践
配置
插件
案例
博客
生态
Module Federation Examples
Practical Module Federation
Zephyr Cloud
Nx
简体中文
English
指南
实践
配置
插件
案例
博客
Module Federation Examples
Practical Module Federation
Zephyr Cloud
Nx
简体中文
English
logologo

开始

介绍
设置环境
快速上手
功能导航
名词解释
npm 包

基础

运行时

Runtime 接入
Runtime API
Runtime Hooks
Rsbuild Plugin
Rspack 插件
Webpack Plugin
Rspress Plugin
Vite Plugin
Metro
类型提示
命令行工具
样式隔离

数据管理

数据获取
数据缓存
Prefetch

框架

Modern.js
Next.js

部署

使用 Zephyr Cloud 部署

调试

开启调试模式
Chrome Devtool
全局变量

Troubleshooting

概览

运行时

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

构建

BUILD-001
BUILD-002

类型

概览
TYPE-001
其他
Edit this page on GitHub
Previous PageRspress Plugin
Next PageMetro

#Vite Plugin

  • 能够构建出满足 Module Federation 加载规范的模块
  • 能够使用别名消费 Module Federation 规范的模块
  • 能够设置模块的共享依赖配置,当加载模块的宿主环境已经存在对应依赖时将不会重复加载
不支持的选项

除了dev、dts 选项外,其他选项全部支持

  • roadmap 🗓️
    • 当模块具备远程类型时将会自动把远程模块的类型下载下来消费
    • 消费远程模块时将具备热更新能力
    • nuxt ssr

#快速开始

#安装

你可以通过如下的命令安装插件:

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

#注册插件

在 vite 中,你可以通过 vite.config.js 配置文件中的 plugins 配置项来添加插件:

vite.config.js
import { federation } from '@module-federation/vite';
module.exports = {
  server: {
    origin: 'http://localhost:2000',
    port: 2000,
  },
  remotes: {
    esm_remote: {
      type: "module",
      name: "esm_remote",
      entry: "https://[...]/remoteEntry.js",
    },
    var_remote: "var_remote@https://[...]/remoteEntry.js",
  },
  base: "http://localhost:2000",
  plugins: [
    federation({
      name: 'vite_provider',
      manifest: true,
      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',
  },
};

#配置构建插件

  • Type: ModuleFederationPlugin(options: ModuleFederationOptions)

  • Module federation 插件的配置结构如下所示:

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

你可以在 Config 总览 页面找到所有配置项的详细说明。