嵌入部署的两个React应用之间如何共享WS_ENDPOINT_URL环境变量？

方案1：改造子应用导出，支持初始化入参（最推荐） #

该方案无全局变量污染，逻辑可追溯，适配单/多实例渲染场景：

• 修改App A的入口导出逻辑，新增初始化参数接收能力：

// App A 入口文件 index.js
let globalConfig = {}

// 导出初始化方法接收配置
export function initApp(config = {}) {
  globalConfig = config
}

// 导出原有渲染方法
export function renderChart(container, props) {
  if(!globalConfig.WS_ENDPOINT_URL) {
    throw new Error("缺少必要参数WS_ENDPOINT_URL，请先调用initApp完成初始化")
  }
  // 把参数传递给根组件即可，WebSocket逻辑直接用传入的参数
  ReactDOM.render(<ChartApp wsUrl={globalConfig.WS_ENDPOINT_URL} {...props} />, container)
}

• App B中调用时先传参初始化再渲染：

// App B 引入子应用的组件
import { initApp, renderChart } from 'app-a-build'
import { useEffect, useRef } from 'react'

// 直接取App B自身的环境变量
const B_WS_URL = process.env.REACT_APP_WS_ENDPOINT_URL

function ChartWrapper() {
  const containerRef = useRef(null)
  useEffect(() => {
    // 先传参初始化
    initApp({ WS_ENDPOINT_URL: B_WS_URL })
    // 再执行渲染
    renderChart(containerRef.current, {})
  }, [])
  return <div ref={containerRef} />
}

方案2：全局变量透传（改造成本最低） #

如果App A改动成本高，可以通过window挂载全局变量传递参数：

• 修改App A中读取环境变量的逻辑，优先取window挂载的参数，降级到构建时环境变量：

// App A 中WebSocket配置位置
const WS_ENDPOINT_URL = window.APP_A_WS_URL || process.env.WS_ENDPOINT_URL

• App B在引入App A代码前，先把参数挂载到window上：

// App B 入口文件或引入App A的代码前
window.APP_A_WS_URL = process.env.REACT_APP_WS_ENDPOINT_URL
// 后续再执行App A的引入和渲染逻辑

注意事项 #

• 所有前端传递的参数均为明文可见，请勿传递敏感鉴权信息
• 如果App A存在多实例渲染场景，优先选择方案1避免全局变量相互覆盖
• 若后续切换为iframe嵌入方式，可通过postMessage或URL Query参数传递配置

内容的提问来源于stack exchange，提问作者Minh Kha