umi是如何暴露react

umi 暴露 React 的方法

umi 是基于 React 的框架，默认情况下 React 是作为项目依赖的一部分。如果需要全局暴露 React（例如在微前端场景中），可以通过以下方式实现：

修改配置暴露 React

在 config/config.ts 或 .umirc.ts 中配置 externals，将 React 和 ReactDOM 设置为外部依赖：

export default {
  externals: {
    react: 'window.React',
    'react-dom': 'window.ReactDOM',
  },
};

通过 HTML 模板注入 CDN

在 src/pages/document.ejs 或公共 HTML 模板中添加 CDN 链接，确保 React 和 ReactDOM 在全局可用：

<script crossorigin src="https://unpkg.com/react@18/umd/react.production.min.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.production.min.js"></script>

验证暴露是否成功

在项目中直接使用 window.React 或 window.ReactDOM，确保能正常访问。例如在控制台打印：

console.log(window.React);

动态加载场景的处理

如果项目需要动态加载 React（如按需加载），可以通过 runtimePublicPath 配置结合 CDN 动态加载：

export default {
  runtimePublicPath: true,
};

注意事项

• 暴露 React 后，需确保项目中不再打包 React，否则会导致重复加载。
• 微前端场景下，主应用和子应用需统一 React 版本，避免冲突。
• 生产环境建议使用稳定的 CDN 地址，避免版本不一致问题。