模块联邦的一次尝试记录！就webpack和vite实现Vue项目的模块联邦的完整记录，模块联邦其实就是一种网络资源组件共
站长
· 阅读数 33
今天看到模块联邦突然间想试一试，虽然工作上现在用不到，本次就Webpack和Vite工具的一次搭建记录总结及问题汇总。
什么是模块联邦
模块联邦是一种微前端架构模式，允许将一个大型应用拆分成多个小的、独立的模块，每个模块负责一个特定的功能或特性。这种开发模式有助于提高代码的可维护性、可测试性和可重用性。模块联邦通过Webpack等构建工具实现，允许不同模块之间共享依赖，减少代码冗余和资源浪费。
简单讲就是引用外部网络资源作为组件的一种方案，类似这种功能：
...
loadScript("http://127.0.0.1:8090/dist/entry.js").then(res => {
// 加载组件
...
})
...
以此就可以加载线上的公共组件，如果该组件维护也只需维护主站的代码即可，在一定程度上是一种便利的实现方案，但是相对于乾坤，无界等微前端实现方案来模块联邦来说使用上还是比较麻烦的。
基于Webpack Vue2 的实现
创建A，B项目
// A 项目
sudo vue create webpack-app-a
sudo npm install echarts --save
// B 项目
sudo vue create webpack-app-b
创建好后处理项目
A项目文件
vue.config.js 配置
const { defineConfig } = require('@vue/cli-service')
//模块联邦插件
const ModuleFederationPlugin = require('webpack/lib/container/ModuleFederationPlugin');
module.exports = defineConfig({
transpileDependencies: true,
// 设置绝对路径防止模块联邦被引入时找不到资源文件
publicPath: 'http://localhost:8080/',
chainWebpack: (config) => {
// 配置异步加载
config.optimization.splitChunks({
chunks: 'async',
})
},
configureWebpack: {
target: ['es6', 'web'],
devServer: {
// 允许跨域
headers: {
"Access-Control-Allow-Origin": "*"
}
},
plugins: [
new ModuleFederationPlugin({
name: 'web',
filename: 'remoteEntry.js',
exposes: {
'./HelloWorld': './src/components/HelloWorld.vue',
},
// 如果是本地开发时请注释掉否者本项目打开会异常
// shared: {
// vue: {
// singleton: true
// },
// echarts: {
// singleton: true
// }
// },
})
],
experiments: {
topLevelAwait: true
},
}
})
HelloWorld.vue 内容
<template>
<div class="hello" ref="eDom"></div>
</template>
<script>
import * as echarts from 'echarts'
export default {
name: 'HelloWorld',
props: {
msg: String
},
mounted() {
this.initEcharts()
},
methods: {
initEcharts() {
var myChart = echarts.init(this.$refs.eDom);
const colors = ['#FFAE57', '#FF7853', '#EA5151', '#CC3F57', '#9A2555'];
const bgColor = '#2E2733';
const itemStyle = {
star5: {
color: colors[0]
},
star4: {
color: colors[1]
},
star3: {
color: colors[2]
},
star2: {
color: colors[3]
}
};
const data = [
{
name: '虚构',
itemStyle: {
color: colors[1]
},
children: [
{
name: '小说',
children: [
{
name: '5☆',
children: [
{
name: '疼'
},
{
name: '慈悲'
},
{
name: '楼下的房客'
}
]
},
{
name: '4☆',
children: [
{
name: '虚无的十字架'
},
{
name: '无声告白'
},
{
name: '童年的终结'
}
]
},
{
name: '3☆',
children: [
{
name: '疯癫老人日记'
}
]
}
]
},
{
name: '其他',
children: [
{
name: '5☆',
children: [
{
name: '纳博科夫短篇小说全集'
}
]
},
{
name: '4☆',
children: [
{
name: '安魂曲'
},
{
name: '人生拼图版'
}
]
},
{
name: '3☆',
children: [
{
name: '比起爱你，我更需要你'
}
]
}
]
}
]
},
{
name: '非虚构',
itemStyle: {
color: colors[2]
},
children: [
{
name: '设计',
children: [
{
name: '5☆',
children: [
{
name: '无界面交互'
}
]
},
{
name: '4☆',
children: [
{
name: '数字绘图的光照与渲染技术'
},
{
name: '日本建筑解剖书'
}
]
},
{
name: '3☆',
children: [
{
name: '奇幻世界艺术\n&RPG地图绘制讲座'
}
]
}
]
},
{
name: '社科',
children: [
{
name: '5☆',
children: [
{
name: '痛点'
}
]
},
{
name: '4☆',
children: [
{
name: '卓有成效的管理者'
},
{
name: '进化'
},
{
name: '后物欲时代的来临'
}
]
},
{
name: '3☆',
children: [
{
name: '疯癫与文明'
}
]
}
]
},
{
name: '心理',
children: [
{
name: '5☆',
children: [
{
name: '我们时代的神经症人格'
}
]
},
{
name: '4☆',
children: [
{
name: '皮格马利翁效应'
},
{
name: '受伤的人'
}
]
},
{
name: '3☆'
},
{
name: '2☆',
children: [
{
name: '迷恋'
}
]
}
]
},
{
name: '居家',
children: [
{
name: '4☆',
children: [
{
name: '把房子住成家'
},
{
name: '只过必要生活'
},
{
name: '北欧简约风格'
}
]
}
]
},
{
name: '绘本',
children: [
{
name: '5☆',
children: [
{
name: '设计诗'
}
]
},
{
name: '4☆',
children: [
{
name: '假如生活糊弄了你'
},
{
name: '博物学家的神秘动物图鉴'
}
]
},
{
name: '3☆',
children: [
{
name: '方向'
}
]
}
]
},
{
name: '哲学',
children: [
{
name: '4☆',
children: [
{
name: '人生的智慧'
}
]
}
]
},
{
name: '技术',
children: [
{
name: '5☆',
children: [
{
name: '代码整洁之道'
}
]
},
{
name: '4☆',
children: [
{
name: 'Three.js 开发指南'
}
]
}
]
}
]
}
];
for (let j = 0; j < data.length; ++j) {
let level1 = data[j].children;
for (let i = 0; i < level1.length; ++i) {
let block = level1[i].children;
let bookScore = [];
let bookScoreId;
for (let star = 0; star < block.length; ++star) {
let style = (function (name) {
switch (name) {
case '5☆':
bookScoreId = 0;
return itemStyle.star5;
case '4☆':
bookScoreId = 1;
return itemStyle.star4;
case '3☆':
bookScoreId = 2;
return itemStyle.star3;
case '2☆':
bookScoreId = 3;
return itemStyle.star2;
}
})(block[star].name);
block[star].label = {
color: style.color,
downplay: {
opacity: 0.5
}
};
if (block[star].children) {
style = {
opacity: 1,
color: style.color
};
block[star].children.forEach(function (book) {
book.value = 1;
book.itemStyle = style;
book.label = {
color: style.color
};
let value = 1;
if (bookScoreId === 0 || bookScoreId === 3) {
value = 5;
}
if (bookScore[bookScoreId]) {
bookScore[bookScoreId].value += value;
} else {
bookScore[bookScoreId] = {
color: colors[bookScoreId],
value: value
};
}
});
}
}
level1[i].itemStyle = {
color: data[j].itemStyle.color
};
}
}
var option = {
backgroundColor: bgColor,
color: colors,
series: [
{
type: 'sunburst',
center: ['50%', '48%'],
data: data,
sort: function (a, b) {
if (a.depth === 1) {
return b.getValue() - a.getValue();
} else {
return a.dataIndex - b.dataIndex;
}
},
label: {
rotate: 'radial',
color: bgColor
},
itemStyle: {
borderColor: bgColor,
borderWidth: 2
},
levels: [
{},
{
r0: 0,
r: 40,
label: {
rotate: 0
}
},
{
r0: 40,
r: 105
},
{
r0: 115,
r: 140,
itemStyle: {
shadowBlur: 2,
shadowColor: colors[2],
color: 'transparent'
},
label: {
rotate: 'tangential',
fontSize: 10,
color: colors[0]
}
},
{
r0: 140,
r: 145,
itemStyle: {
shadowBlur: 80,
shadowColor: colors[0]
},
label: {
position: 'outside',
textShadowBlur: 5,
textShadowColor: '#333'
},
downplay: {
label: {
opacity: 0.5
}
}
}
]
}
]
};
myChart.setOption(option);
}
}
}
</script>
<style scoped>
.hello {
width: 500px;
height: 500px;
}
</style>
项目B文件
vue.config.js 配置
const { defineConfig } = require('@vue/cli-service')
const ModuleFederationPlugin = require('webpack/lib/container/ModuleFederationPlugin');
module.exports = defineConfig({
transpileDependencies: true,
configureWebpack: {
target: ['es6', 'web'],
experiments: {
topLevelAwait: true
},
plugins: [
new ModuleFederationPlugin({
name: 'container',
remotes: {
web: 'web@http://localhost:8080/remoteEntry.js',
}
})
]
}
})
App.vue 实现
<template>
<div id="app">
<img alt="Vue logo" src="./assets/logo.png">
<HelloWorld msg="Welcome to Your Vue.js App"/>
</div>
</template>
<script>
const HelloWorld = () => import("web/HelloWorld")
export default {
name: 'App',
components: {
HelloWorld: HelloWorld
}
}
</script>
<style>
#app {
font-family: Avenir, Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
</style>
启动
项目A： npm run serve
项目B： npm run serve
启动后就可以在8082上看到8080的Echart图了。
注意
1、请注意publicPath配置，如果不配置这个会找不到对应资源，可以尝试去掉之后在代码中打断断点看看webpack查找资源的流程，具体现象如下：
可以看到两个文件404，当然如果把资源都打包到一个文件里也可以避免这个问题。
2、主苦的webpack的shared的配置在开发模式上请注释掉否则会提示以下图的异常：
VUE3 Vite实现
Vite实现特别简单不需要Webpack那么多的配置和Webpack的弯弯绕绕的文件打包引用过程。
创建流程掠过直接上vite.config.js 项目A
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import federation from "@originjs/vite-plugin-federation";
// https://vitejs.dev/config/
export default defineConfig({
base:"./",
plugins: [
vue(),
federation({
//定义模块服务名称
name: "vite-module-test",
//build后的入口文件
filename: "remoteEntry.js",
//需要暴露的组件
exposes: {
"./HelloWorld": "./src/components/HelloWorld.vue",
},
//声明共享的依赖库
shared: ["vue"],
})
],
build: {
target: 'esnext',
minify: false,
cssCodeSplit: false,
rollupOptions: {
output: {
minifyInternalExports: false
}
}
}
})
项目B
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import federation from "@originjs/vite-plugin-federation"
// https://vitejs.dev/config/
export default defineConfig({
plugins: [
vue(),
federation({
name: "vite-module-app",
remotes: {
vite_module_test: "http://localhost:5173/assets/remoteEntry.js"
},
shared: ["vue"],
})
],
build: {
target: 'esnext',
minify: false,
cssCodeSplit: false,
rollupOptions: {
output: {
minifyInternalExports: false
}
}
}
})
App.vue
<script>
import { defineAsyncComponent } from 'vue'
export default {
name: 'App',
components: {
// 加载异步组件
HelloWorld: defineAsyncComponent(() => import('vite_module_test/HelloWorld'))
}
}
</script>
<template>
<HelloWorld msg="Vite + Vue - 1" />
</template>
<style scoped></style>
转载自:https://juejin.cn/post/7415197931253547062