微前端之实践环境变量设置、快照沙箱隔离、代理沙箱隔离、css 样式隔离、父子应用间通信和子应用间通信

最新推荐文章于 2025-09-13 00:53:27 发布

原创

最新推荐文章于 2025-09-13 00:53:27 发布 · 1.9k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#微前端 #环境变量设置 #快照沙箱隔离、代理沙箱隔离 #css 样式隔离 #父子应用间通信和子应用间通信

一、微前端之实践环境变量设置、快照沙箱隔离、代理沙箱隔离、css 样式隔离、父子应用间通信和子应用间通信

微前端环境变量设置，如下所示：

在 micro 下的 sandbox 中 performScript.js，performScriptForFunction 是执行 js 脚本，performScriptForEval 是获取到子应用的内容，代码如下：

export const performScriptForFunction = (script, appName, global) => {
   
   
  window.proxy = global;
  console.log(global);
  const scriptText = `
    return ((window) => {
      ${
     
     script}
      return window['${
     
     appName}']
    })(window.proxy)
  `
  return new Function(scriptText)()
}

export const performScriptForEval = (script, appName, global) => {
   
   
  window.proxy = global;
  const scriptText = `
    ((window) => {
      ${
     
     script}
      return window['${
     
     appName}'] 
    })(window.proxy)
  `
  return eval(scriptText)

在 micro 下的 sandbox 中 index.js，isCheckLifeCycle 是检验是否存在生命周期，sandBox 是子应用生命周期处理，环境变量设置。通过 new ProxySandbox 创建代理对象，通过 window.__MICRO_WEB__ 设置环境变量，通过 performScriptForEval 运行 js 文件，通过 isCheckLifeCycle(lifecycle) 判断生命周期，有则挂载到 app 上，index.js，代码如下：

import {
   
    performScriptForEval } from './performScript'
// import { SnapShotSandbox } from './snapShotSandbox'
import {
   
    ProxySandbox } from './proxySandbox'
const isCheckLifeCycle = lifecycle => lifecycle &&
  lifecycle.bootstrap &&
  lifecycle.mount &&
  lifecycle.unmount

export const sandBox = (app, script) => {
   
   
  const proxy = new ProxySandbox();
  if (!app.proxy) {
   
   
    app.proxy = proxy;
  }

  window.__MICRO_WEB__ = true;
  
  const lifecycle = performScriptForEval(script, app.name, app.proxy.proxy);

  if