如何在monorepo的多个前端库之间共享React Context？

开发者阿泽

2026-9-25

问题根本原因

你遇到的问题90%以上不是压缩命名冲突导致的，核心原因是React Context 按引用匹配：如果库a和库b在各自构建时都把ContextA的源码打进了自身产物，运行时就会存在两个完全独立的ContextA实例——应用侧提供的是库a导出的ContextA实例，库b内部组件消费的是自己打包出来的另一个ContextA实例，二者引用不同自然匹配不上。

解决方案

方案1：抽取共享Context为独立公共依赖包（最推荐）

这是monorepo场景下的标准解法，适配所有全局、局部Context场景，无额外使用成本：

在monorepo中新建独立公共包，比如命名为@your-scope/shared-contexts，将所有需要跨库共享的Context都放在这个包中导出
调整库a、库b的依赖配置：将@your-scope/shared-contexts设为peerDependency，不要作为dependency引入
调整库a、库b的rollup构建配置，将@your-scope/shared-contexts加入external列表，避免构建时把公共包代码打进自身产物：

// rollup.config.js
export default {
  // 其他配置...
  external: ['react', 'react-dom', '@your-scope/shared-contexts']
}

这样应用安装依赖时只会存在一份@your-scope/shared-contexts实例，库a、库b使用的都是同一个Context引用，直接在应用外层套Provider即可，不需要额外中间层封装。

方案2：全局挂载Context实例（快速临时解法）

如果不想新增公共包，可以通过全局变量挂载的方式保证Context实例唯一，注意要处理命名冲突和SSR兼容问题：
在ContextA的定义文件中加入如下逻辑：

import React from 'react'

const DEFAULT_CONTEXT_VALUE = {/* 默认值 */}
// 用足够特殊的全局变量名避免命名冲突
const GLOBAL_CONTEXT_KEY = '__YOUR_PROJECT_CONTEXT_A__'

// 优先取全局已存在的实例，不存在则新建
export const ContextA = globalThis[GLOBAL_CONTEXT_KEY] || React.createContext(DEFAULT_CONTEXT_VALUE)

// 仅在生产环境挂载到全局，避免开发环境热重载导致的实例异常
if (process.env.NODE_ENV === 'production') {
  globalThis[GLOBAL_CONTEXT_KEY] = ContextA
}

库a和库b都用上述方式定义/引入ContextA即可保证实例唯一。

方案3：配置压缩工具保留Context命名（仅针对压缩改名场景）

如果确认问题是压缩导致的变量名不一致，可以修改rollup的压缩插件配置，将Context的变量名加入保留列表避免被重命名：

// rollup.config.js 中terser插件的配置
import terser from '@rollup/plugin-terser'

export default {
  // 其他配置...
  plugins: [
    terser({
      reserved: ['ContextA'] // 加入你要保留的变量名
    })
  ]
}

注意该方案只能解决命名被篡改的问题，如果是Context实例重复的问题，该配置无效。

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