认识

2023年11月29日

柏拉文

越努力，越幸运

一、认识

---

vite-plugin-federation 是一个比较成熟的 Vite 模块联邦方案, 这个方案基于 Vite(或者 Rollup) 实现了完整的模块联邦能力。

二、语法

---

2.1 Host

本地模块通过 remotes 注册远程模块地址

import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
import federation from "@originjs/vite-plugin-federation";

export default defineConfig({
  build: {
    target: "esnext",
  },
  plugins: [
    vue(),
    federation({
      name: 'hostApp',
      remotes: {
        remoteApp: 'http://localhost:5173/assets/remoteEntry.js'
      },
      shared: ['vue']
    })
  ]
});

本地通过import '远程模块名称/xxx'的方式来引入远程模块，实现运行时加载

<template>
  <div>
    {{  a }}
    <RemoteButton>按钮</RemoteButton>
  </div>
</template>

<script setup lang="ts">
import { a } from 'remoteApp/utils';
import RemoteButton from 'remoteApp/Button';
</script>

2.2 Remote

远程模块通过 exposes 注册导出的模块

import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
import federation from "@originjs/vite-plugin-federation";

export default defineConfig({
  build: {
    target: 'esnext'
  },
  plugins: [
    vue(),
    federation({
      name: 'remoteApp',
      filename: 'remoteEntry.js',
      exposes: {
        './utils': './src/utils.ts',
        './Button': './src/components/Button.vue',
        
      },
      shared: ['vue']
    })
  ]
});