@jiayouzuo/vite-module-federation-core

Vite 模块联邦插件，支持微前端架构中的模块共享与远程加载。

安装

``bash
pnpm add @jiayouzuo/vite-module-federation-core
`

功能特性

- 支持 exposes 暴露模块
- 支持 remotes 消费远程模块
- 支持 shared 共享依赖
- 支持 exposes 和 remotes 同时使用
- 支持 singleton 单例模式
- 支持 strictVersion 严格版本校验
- 支持开发环境和生产环境
- 支持 Vue 和 React 项目

---

Vue 示例

$3

`ts
// remote-vue-app/vite.config.ts
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import federation from '@jiayouzuo/vite-module-federation-core'

export default defineConfig({
plugins: [
vue(),
federation({
// 模块名称，主应用通过此名称引用
name: 'remoteVueApp',
// 远程入口文件名
filename: 'remoteEntry.js',
// 暴露的模块，key 为导出名，value 为文件路径
exposes: {
'./Button': './src/components/Button.vue',
'./Card': './src/components/Card.vue',
'./utils': './src/utils/index.ts'
},
// 共享依赖，避免重复加载
shared: {
vue: {
singleton: true, // 单例模式，确保只有一个 Vue 实例
requiredVersion: '^3.0.0'
}
}
})
],
// 需要 es2022 或更高
build: {
target: 'es2022',
minify: false
}
})
`

$3

`ts
// host-vue-app/vite.config.ts
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import federation from '@jiayouzuo/vite-module-federation-core'

export default defineConfig({
plugins: [
vue(),
federation({
name: 'hostVueApp',
// 远程模块配置
remotes: {
// key: 引用名称，value: 远程入口地址
remoteVueApp: 'http://localhost:5001/assets/remoteEntry.js'
},
// 共享依赖配置需与远程应用一致
shared: {
vue: {
singleton: true,
requiredVersion: '^3.0.0'
}
}
})
],
build: {
target: 'es2022',
minify: false
}
})
`

$3

`vue




`

---

React 示例

$3

`ts
// remote-react-app/vite.config.ts
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
import federation from '@jiayouzuo/vite-module-federation-core'

export default defineConfig({
plugins: [
react(),
federation({
name: 'remoteReactApp',
filename: 'remoteEntry.js',
// 暴露 React 组件
exposes: {
'./Button': './src/components/Button.tsx',
'./Modal': './src/components/Modal.tsx',
'./hooks': './src/hooks/index.ts'
},
shared: {
// React 必须使用单例模式，否则会报 hooks 错误
react: {
singleton: true,
requiredVersion: '^18.0.0'
},
'react-dom': {
singleton: true,
requiredVersion: '^18.0.0'
}
}
})
],
build: {
target: 'es2022',
minify: false
}
})
`

$3

`ts
// host-react-app/vite.config.ts
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
import federation from '@jiayouzuo/vite-module-federation-core'

export default defineConfig({
plugins: [
react(),
federation({
name: 'hostReactApp',
remotes: {
remoteReactApp: 'http://localhost:5002/assets/remoteEntry.js'
},
shared: {
react: {
singleton: true,
requiredVersion: '^18.0.0'
},
'react-dom': {
singleton: true,
requiredVersion: '^18.0.0'
}
}
})
],
build: {
target: 'es2022',
minify: false
}
})
`

$3

`tsx
// host-react-app/src/App.tsx
import React, { lazy, Suspense } from 'react'

// 动态导入远程组件
const RemoteButton = lazy(() => import('remoteReactApp/Button'))
const RemoteModal = lazy(() => import('remoteReactApp/Modal'))

// 导入远程 hooks
import { useCounter } from 'remoteReactApp/hooks'

function App() {
const { count, increment } = useCounter()

return (