乾坤qiankun(微前端)样式隔离解决方案--使用插件替换前缀

一、前言

qiankun作为微前端的一种融合方式,目前也比较成熟,但是由于各类开发技术选型非常繁多,导致了在项目中配置不同,解决别人的问题,不一定能解决自己的问题。

  • 使用的js框架的不同或版本的不同:vue/react 等,vue2/vue3 等
  • ui组件库版本的不同,以element为例,可分为element-ui/element-plus
  • 打包工具的不同,比如常用的webpack/vite等
  • 各类插件版本的不同,比如,node的版本,webpack的版本,vite的版本,node-sass/sass-loader的版本等

二、样式隔离

single-spa 没有做这部分的工作。一个大型的系统会有很的微应用组成,怎么保证这些微应用之间的样式互不影响?微应用和主应用之间的样式互不影响?这时只能通过约定命名规范来实现,比如应用样式以自己的应用名称开头,以应用名构造一个独立的命名空间,这个方式新系统还好说,如果是一个已有的系统,这个改造工作量可不小。

本文以主应用UI框架与子应用UI框架分别使用element-ui和element-plus来做示例。

因为element-ui和element-plus前缀相同、命名规则相同,但内部html结构发生变化,从而导致子应用element-plus的样式会被污染。

三、解决方案

以下设置需要注意不能开启sandbox:{strictStyleIsolation:
true},并且注意自定义样式最好规范加上自定义规范,尽量不与基座应用同名。

1、使用change-prefix-loader替换js中的class前缀

安装依赖change-prefix-loader

npm i change-prefix-loader -D

配置规则



module.exports = {
    chainWebpack: config => {
        config.module
            .rule('change-prefix')
            .test(/\.js$/)
            .include.add(path.resolve(__dirname, './node_modules/element-ui/lib'))
            .end()
            .use('change-prefix')
            .loader('change-prefix-loader')
            .options({
                prefix: 'el-',
                replace: 'gp-'
            })
            .end()
    },
}
2、使用postcss-change-css-prefix替换css样式前缀

安装依赖

npm i postcss-change-css-prefix -D

配置规则,在根目录创建postcss.config.js


const addCssPrefix = require('postcss-change-css-prefix')

module.exports = {
  plugins: [
    addCssPrefix({
      prefix: 'el-',
      replace: 'gp-',
    }),
  ],
}
3、options参数
  1. prefix
    type: string, 可选
    需要被替换的前缀
    default: el-

  2. replace
    type: string, 可选
    需要替换的前缀
    default: gt-

4、element-ui的组件前缀和样式前缀都被替换成gp了。

项目源码:

html标签的前缀,原来是el
乾坤qiankun(微前端)样式隔离解决方案--使用插件替换前缀_第1张图片
css样式的前缀,原来是.el
乾坤qiankun(微前端)样式隔离解决方案--使用插件替换前缀_第2张图片

运行后的代码:
html标签的前缀,编译后calss是el
乾坤qiankun(微前端)样式隔离解决方案--使用插件替换前缀_第3张图片
css样式的前缀,编译后是.gp
乾坤qiankun(微前端)样式隔离解决方案--使用插件替换前缀_第4张图片

你可能感兴趣的:(vue,vue3,前端)