• 简体中文

      • Vite

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

      除了 dev 选项外，其他选项全部支持（包含 dts）。

      • roadmap 🗓️
        • 消费远程模块时将具备热更新能力
        • nuxt ssr

      快速开始

      安装

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

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

      创建 module-federation.config.ts

      创建 module-federation.config.ts 文件，内容如下：

      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,
    },
  },
});

      注册插件

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

      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',
  },
};

      配置构建插件

      • Type: ModuleFederationPlugin(options: ModuleFederationOptions)

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

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

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