前言:
备注:本文基于对webpack Module Federation有一定了解的情况下
一般情况下使用模块联邦都是会使用相同的版本,如Vue2的组件时在Vue2中使用,但我为什么会在Vue3项目中去使用Vue2的组件呢,其实是因为历史原因。好几个老的核心的项目都是使用Vue2来写的,在中期以及空闲的时候团队是有机会使用Vue3去重构,但是并没有这样做,到了现在这个阶段已经太晚了,项目变得庞大,人员也减少了。
最近在维护一个项目,被折磨得不行,比如一个.vue文件有3千行代码,框架设计不合理,不易于维护,更不易于多人维护。所以,我决定抽空去重构。
Vue3相对于Vue2的好处不言而喻,故索性使用Vue3 + ts + pinia + element-plus + webpack,由于要使用module federation,所以使用webpack,因为Vite 对module federation支持还是不太好
一、如何使用:
虽然webpack官网并没有介绍,但是在GitHub中找到了Module Federation demo,传送门。
首先,我们把demo跑起来。
1.将代码拉下来:https://github.com/module-federation/module-federation-examples.git
2.在最外层目录安装依赖
yarn
3.进入vue2-in-vue3这个目录,执行命令启动
yarn start
这时候会启动两个服务,其中vue3使用了vue2的Button组件:
- 使用方HOST (vue3): localhost:3002
- 提供方REMOTE (vue2): localhost:3001
webpack相关配置:
vue2 webpack配置
plugins: [
...
new ModuleFederationPlugin({
name: 'vue2App',
filename: 'remoteEntry.js',
library: { type: 'var', name: 'vue2App' },
exposes: {
'./vue2': './node_modules/vue/dist/vue', // 注意点:这里需要把vue暴露出去,原因后面讲
'./Button': './src/components/Button',
},
}),
...
],
vue3 webpack配置
plugins: [
...
new ModuleFederationPlugin({
name: 'vue3',
filename: 'remoteEntry.js',
remotes: {
vue2App: 'vue2App@http://localhost:3001/remoteEntry.js',
},
}),
...
],
vue3项目 App.vue文件
Vue3 App
utils.js,核心在于使用vue2ToVue3方法,使用vue2渲染函数将vue2组件挂载到指定元素
import Vue2 from 'vue2App/vue2';
function bindSlotContext(target = {}, context) {
return Object.keys(target).map(key => {
const vnode = target[key];
vnode.context = context;
return vnode;
});
}
/* 核心
* Transform vue2 components to DOM.(官方注释)
* 理解:这里通过使用vue2的渲染函数,将导入的组件挂载在指定的节点上,巧妙地让vue2的组件能在vue3中使用
* * 确实解决了问题,但是在使用的时候会有一些弊端:
* * 1、存在弊端:每使用一个组件就需要写一个元素去承载,在使用比较频繁的组件中,如:button、input 等常用组件,
* 一个页面可能使用非常多个,那么在书写的时候就需要创建很多元素去承载,所以在这种场景下不太适合使用
* * 2、使用场景:使用频率低,有交互的、稍微复杂一点的组件
*/
export function vue2ToVue3(WrapperComponent, wrapperId) {
let vm;
return {
mounted() {
const slots = bindSlotContext(this.$slots, this.__self);
vm = new Vue2({
render: createElement => {
return createElement(
WrapperComponent,
{
on: this.$attrs,
attrs: this.$attrs,
props: this.$props,
scopedSlots: this.$scopedSlots,
},
slots,
);
},
});
vm.$mount(`#${wrapperId}`);
},
props: WrapperComponent.props,
render() {
vm && vm.$forceUpdate();
},
};
}
vue2项目,Button.vue, 注意点:
二、常见问题:
一、Uncaught Error: Shared module is not available for eager consumption
其实webpack官方是有给出解决方法的,详情见这里
官方给出的解决方法:新建一个bootstrap.js ,将main.js的内容放到bootstrap.js中,在主入口异步去加载bootstrap.js
// bootstrap.js
import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
createApp(App).use(router).mount('#app')
// 程序入口:main.js 有的是叫做 index.js
import ('./bootstrap.js')
按照故事情节发展,这个问题就解决了,但是这时候我依旧还是报这个错。在以前的其它项目中,我也是使用这种方式解决这个问题,为什么这一次不行了?
经过排查,我定位到了原因:
1、由于我是使用vue-cli创建的,vue-cli中默认2个环境变量 NODE_ENV='development'和 NODE_ENV='production',但是不满足我使用,我增加了一个 NODE_ENV='test',自定义了 --mode,如下:
package.json
serve:test": "vue-cli-service serve --mode test
# 在根目录中使用了三个环境变量文件
|-- .env.development
|-- .env.production
|-- .env.test
.env.development代码:
NODE_ENV = 'development'
VUE_APP_API_ENV = 'dev'
.env.production:
NODE_ENV = 'production'
VUE_APP_API_ENV = 'prod'
.env.test:
NODE_ENV = 'test'
VUE_APP_API_ENV = 'test'
问题就出现在.env.test中,如果NODE_ENV = 'test'的话则会报错“Shared module is not available for eager consumption”
我把.env.test改为如下就好了:
NODE_ENV = 'development' # 这里要改为development
VUE_APP_API_ENV = 'test'
改正这样其实对于我的项目也没有影响,因为本来项目就只有正式和开发两个环境,我定义多了一个环境变量用来表示接口的环境,有时候可以给后端在本地调试使用,当然大家也可以使用cross-env的方式。
二、在vue2微服务中,使用了vue3不支持的第三方库,element-ui 在vue3中不能使用,需要使用element-plus
在我的vue2组件库中,有一部分组件对element-ui进行了二次封装,在vue3使用模块联邦去使用的时候就报错了,如:无法找到el-table 等。
测试element-plus在项目中是正常使用的,那我就导入element-ui看看能不能用,当然是不可用的,如果支持vue3的话,就不用弄一个element-plus了。
当然,除了这种情况以外,微服务暴露的工具函数,或者自己手写的组件,都是可以使用的。
总结:
1、首先,本人不太推荐使用这种方式,万不得已不要用
2、Model Federation 在vue3中去使用vue2的组件,会有很多坑,以及不方便的地方,建议有精力的话把组件库改为vue3的,或者vue2 、 vue3通用的