微前端在项目中如何落地

// 白名单集合
const whiteUrl = ["https://api.map.baidu.com"];
// 脚本请求地址
const scriptUrl = ["https://api.map.baidu.com/getscript"];

/**
 * qiankun 自定义请求
 */
export function qiankunFetch(url, args) {
  let hijack = false;
  whiteUrl.some((item) => {
    if (url.includes(item)) {
      hijack = true;
      insertEleGetScript(url);
      return true;
    }
  });
  if (hijack) return Promise.resolve();
  return window.fetch(url, ...args);
}

/**
 * 插入标签获取脚本
 */
function insertEleGetScript(url) {
  let head = document.getElementsByTagName("head")[0];
  let ele = document.createElement("script");
  let id = +new Date() + Math.random();
  ele.src = url;
  ele.id = id;
  head.append(ele);
  ele.onload = function () {
    let removeFlag;
    scriptUrl.some((item) => {
      if (url.includes(item)) {
        removeFlag = true;
        return true;
      }
    });
    if (!removeFlag) head.removeChild(document.getElementById(id));
  };
}

loadMicroApp({
  ....
}, {
  excludeAssetFilter: (assetUrl) => {
    const whiteUrl = ['baidu']
    return whiteUrl.some((e) => assetUrl.includes(e))
  },
})

Cannot read properties of null (reading 'parentNode')

// 获取子应用使用
loadMicroApp(
{
  name: microName,
  props: {
    // 获取主工程Windows
    getParentWindows: () => {
      return window
    },
    ...
  },
  ...
},

// 获取原生window
const window_ = window.__POWERED_BY_QIANKUN__
  ? window._getParentWindows()
  : window;
// 更改this指向
window_.onLoad = () => {
  // 地图相关api调用
  this.initMap();
  this.mapSearchInit();
};

const styleNodes = appElement.querySelectorAll('style') || [];
forEach(styleNodes, (stylesheetElement: HTMLStyleElement) => {
  css.process(appElement!, stylesheetElement, appInstanceId);
});

// 调整webpack配置，指定gcommon使用change-class-prefix-loader
chainWebpack: (config) => {
...
// 将gcommon-ui的class名称前缀修改了
config.module
  .rule('change-prefix')
  .test(/.js$/)
  .include.add(path.resolve(__dirname, './node_modules/@gcommon/gcommon-ui'))
  .end()
  .use('change-prefix')
  .loader('./plugins/webpack/change-class-prefix-loader')
  .options({
    prefix: 'el-',
    replace: 'portal-el-',
  })
  .end()
}


/**
* change-class-prefix-loader.js
*/
module.exports = function changeClassPrefixLoader(source) {
const { prefix = 'el-', replace = 'gp-' } = loaderUtils.getOptions(this) || {}
const result = handleSource(source, prefix, replace)
return result.code
}


function handleSource(source, prefix, replace) {
const ast = parser.parse(source)
traverse(ast, {
  CallExpression(path) {
    path.traverse({
      Literal(path) {
        const node = path.node
        // 普通字符串替换
        if (
          typeof node.value === 'string' &&
          node.value.indexOf(prefix) !== -1 &&
          !canChange(path) &&
          config.classPrefixList.some((e) => node.value.includes(e))
        ) {
          const reg = new RegExp(`(^|(\s)+|(\.)+)${prefix}(?!icon)`, 'g')
          node.value = node.value.replace(reg, `$1${replace}`)
        }
        path.replaceWith(node)
      },
      RegExpLiteral(path) {
        const node = path.node
        if (node.pattern.indexOf(prefix) !== -1 && config.classPrefixList.some((e) => node.pattern.includes(e))) {
          const reg = new RegExp(prefix, 'g')
          node.extra.raw = node.extra.raw.replace(reg, replace)
          node.pattern = node.pattern.replace(reg, replace)
        }
        path.replaceWith(node)
      },
    })
  },
})
return generate(ast)
}


function canChange(path) {
const parenNode = path.parent
if (parenNode.type !== 'CallExpression') return false
return parenNode.callee && (parenNode.callee.name === 'h' || parenNode.callee.name === '_c')
}

// postcss.config.j文件s
const changeCssPrefix = require("./plugins/postcss/change-css-prefix");
module.exports = {
  plugins: [
    // 将gcommon-ui的css名称前缀修改了
    changeCssPrefix({
      prefix: "el-",
      replace: "portal-el-",
    }),
  ],
};

/**
 * change-css-prefix
 */
const postcss = require("postcss");
const config = require("../../config");
module.exports = postcss.plugin("change-css-prefix", function (opts = {}) {
  const { prefix = "el-", replace = "gp-" } = opts || {};
  // 接收两个参数，第一个是每个css文件的ast，第二个参数中可获取转换结果相关信息(包括当前css文件相关信息)
  function plugin(css, result) {
    css.walkRules((rule) => {
      // 遍历当前ast所有rule节点
      const { selector } = rule;
      if (
        selector.includes(prefix) &&
        !selector.includes(replace) &&
        config.classPrefixList.some((e) => selector.includes(e))
      ) {
        const clone = rule.clone();
        const reg = new RegExp(`(^|(\s)*)\.${prefix}(?!icon)`, "g");
        clone.selector = selector.replace(reg, `$1.${replace}`);
        rule.replaceWith(clone);
      }
    });
  }
  return plugin;
});

/**
 * 路由前守卫
 * 会在进入路由前判断是否进入子应用，是否需要初始化子应用等
 */
router.beforeEach(async (to, from, next) => {
  ...
  // 乾坤初始化子工程 && 防止重复启动乾坤
  if (!microApps[microName]) {
    ...
    // 启动微前端服务
    microApps[microName] = loadMicroApp(
      {
        name: microName,
        props: {
          // 获取主工程token
          getAuthorization: () => {
            return getCookieItem('Authorization')
          },
          // 获取主工程用户信息
          getUserInfo: () => {
            return store.state.userInfo
          },
          // 获取主工程菜单权限
          getMenuAndPermission: () => {
            return {
              menuList: store.state.menuList,
              permissionList: store.state.permissionList,
            }
          },
          // 获取子工程互相通讯时存入的一些临时值
          getMicroState: () => {
            return store.state.microState
          },
          // 获取主工程Windows
          getParentWindows: () => {
            return window
          },
          // 获取主工程路由对象
          getParentRouter: () => {
            return router
          },
          // 获取主工程我的工作、我的申请跳转函数
          getTaskRouterFun: () => {
            return { myTaskRouter, myApplyRouter, getTaskTypeEnumByModule, getAllTaskTypeEnum }
          },
        },
        ...
      }
      ...
    )
  }
  ...
  next()
})

/**
 * 主工程：定义qiankun数据监控，数据变化时，存入vuex
 */
import { initGlobalState } from 'qiankun'
import store from '@/store'


const actions = initGlobalState({ microLoading: false, microState: {} })
actions.onGlobalStateChange((state, prevState) => {
  store.commit('setMicroLoading', state.microLoading)
  store.commit('setMicroState', state.microState)
})


export default actions


/**
 * 子应用入口文件
 */
 async function render(props) {
  const {
    container,
    getAuthorization,
    getUserInfo,
    getMenuAndPermission,
    getMicroState,
    getParentWindows,
    getParentRouter,
    getTaskRouterFun,
    setGlobalState,
  } = props
  // 主工程加载时
  if (container) {
    console.log('===================子工程加载===================')
    console.log('UserInfo: ', getUserInfo())
    setCookieItem('Authorization', getAuthorization())
    window._getAuthorization = getAuthorization
    window._getUserInfo = getUserInfo
    window._getMenuAndPermission = getMenuAndPermission
    window._getMicroState = getMicroState
    window._getParentWindows = getParentWindows
    window._getParentRouter = getParentRouter
    window._getTaskRouterFun = getTaskRouterFun
    window._setGlobalState = setGlobalState
    setGlobalState({ microLoading: false })
    ...
  }
  ...
}


/**
 * 子应用A 携带值跳转
 */
const parentRouter = window._getParentRouter ? window._getParentRouter() : this.$router
parentRouter.push('xxx')
window._setGlobalState && window._setGlobalState({ microState: { showSplitL2Dialog: true } })


/**
 * 子应用B 页面取值
 */
 window._getMicroState && window._getMicroState().showSplitL2Dialog

this.$router.push({ path: "路由", query: { key: value } });