Vue 2.0 + 乾坤（qiankun）+ Module Federation 踩坑记录（一）
书接上文
先说一个最近发现的问题，Vue 2.0 + 乾坤（qiankun）+ Module Federation 踩坑记录（一）这里说的一个样式兼容方案还是有点问题。 ant-design-vue一些弹窗（渲染到body节点的）组件样式丢失。 解决方案：
增加带有 ant- 的样式类
// index.html
<body class="ant-xxxx">
// App.vue
<div id="xxx" class="ant-xxxx"></div>
接入Module Federation
先说两个概念
remote：远程组件项目
host：使用远程组件
// remote项目
// webpack.config.js
// 没装的自己装一下
...
const { ModuleFederationPlugin } = require('webpack').container
const exposesConfig = require('./exposes.config')
...
optimization: {
splitChunks: false,
...
}
...
plugins: [
new ModuleFederationPlugin(exposesConfig),
]
...
// remote项目
// exposes.config.js
module.exports = {
// 应用名，全局唯一，不可冲突。
name: 'koala',
// 暴露的文件名称
filename: 'remote-entry-koala.js',
library: { type: 'window', name: 'koala' },
// 远程应用暴露出的模块名。
exposes: {
'./config': './src/shared/config.js',
'./demo1': './src/shared/remote-entry-demo1.js',
'./demo2': './src/shared/remote-entry-demo2.js',
},
// 依赖包 依赖的包 webpack在加载的时候会先判断本地应用是否存在对应的包，如果不存在，则加载远程应用的依赖包。
shared: {
vue: {
singleton: true,
requiredVersion: '^2.5.17',
eager: true,
},
},
}
注意这块代码
library: { type: 'window', name: 'koala' }
如果出现这个问题
ScriptExternalLoadError: Loading script failed.
可以先看看这个issue
即使我们不写library的参数，也会默认为 { type: 'var', name: name }，但这里我们需要将 remote_sjms_customer 这个模块去暴露到全局，所以type修改为window。
还要注意
splitChunks: false, 关掉它
// host 项目
// webpack.config.js
// 没装的自己装一下
...
const { ModuleFederationPlugin } = require('webpack').container
const ExternalTemplateRemotesPlugin = require('external-remotes-plugin')
const remoteEntryConfig = require('./remote.entry.config')
...
plugin: [
...
new ModuleFederationPlugin(remoteEntryConfig),
new ExternalTemplateRemotesPlugin(),
]
// remote.entry.config.js
module.exports = {
name: 'view',
filename: 'remote-entry-view.js',
// 引用 koala 的服务
remotes: {
koala: 'koala@[window.koalaUrl]/remote-entry-koala.js?[getRandomString()]',
},
shared: {
vue: {
eager: true,
import: 'vue',
shareKey: 'vue',
shareScope: 'default',
singleton: true,
},
},
}
// remote-url.js
const remoteUrl = {
koalaUrl: {
dev: '//localhost:8779',
pro: `${window.location.protocol}//${window.location.host}/v/koala`,
},
}
const initRemoteUrl = () => {
const isDev = process.env.NODE_ENV === 'development'
for (const key of Object.keys(remoteUrl)) {
window[key] = isDev ? remoteUrl[key].dev : remoteUrl[key].pro
}
window.getRandomString = () => {
return new Date().valueOf()
}
}
export default initRemoteUrl
// main.js
// 初始化远程模块url
import initRemoteUrl from './remote-url'
initRemoteUrl()
// any.vue
components: {
demo:()=>import('koala/demo2')
},
host项目主要做了2个事，注册+使用
external-remotes-plugin
这个插件是用于切换dev/pro模式的
window.getRandomString = () => {
return new Date().valueOf()
}
随机生成字符串，用于解决缓存问题
引入组件要异步，同步获取不到
总结
我的项目本身需要兼容IE11，需要拆解巨石应用，所以需要采用Vue2.0 + qiankun，有很多无奈之举，调研期间也遇到很多问题，但是没有随手记录，觉得亏了一个亿，随后想起写文章吧，能记多少是多少。
如果谁遇到问题可以发到评论区，我回忆一下，万一是遇到过的呢。
酒浆！ 祝好！
本网站是一个以CSS、JavaScript、Vue、HTML为核心的前端开发技术网站。我们致力于为广大前端开发者提供专业、全面、实用的前端开发知识和技术支持。 在本网站中，您可以学习到最新的前端开发技术，了解前端开发的最新趋势和最佳实践。我们提供丰富的教程和案例，让您可以快速掌握前端开发的核心技术和流程。 本网站还提供一系列实用的工具和插件，帮助您更加高效地进行前端开发工作。我们提供的工具和插件都经过精心设计和优化，可以帮助您节省时间和精力，提升开发效率。 除此之外，本网站还拥有一个活跃的社区，您可以在社区中与其他前端开发者交流技术、分享经验、解决问题。我们相信，社区的力量可以帮助您更好地成长和进步。 在本网站中，您可以找到您需要的一切前端开发资源，让您成为一名更加优秀的前端开发者。欢迎您加入我们的大家庭，一起探索前端开发的无限可能!