umi是如何暴露react

umi 暴露 React 的方法

在 umi 项目中，React 默认是全局可用的，无需额外引入。但若需要显式暴露 React 或其他模块，可以通过以下方式实现：

修改 umi 配置 在项目根目录的 .umirc.ts 或 config/config.ts 中，通过 chainWebpack 配置修改 webpack 的 externals 设置：

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

通过 script 标签引入外部 React 在 HTML 中直接通过 CDN 引入 React，确保全局变量 window.React 和 window.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>

使用插件自动处理 安装 umi-plugin-react 或类似插件，通过插件配置自动处理 React 的暴露逻辑：

export default {
  plugins: [
    ['umi-plugin-react', {
      externals: {
        react: 'React',
        'react-dom': 'ReactDOM',
      },
    }],
  ],
};

动态导入模块 若需按需暴露模块，可通过动态导入语法实现：

import('react').then(React => {
  window.React = React;
});

注意事项

• 确保 React 版本与项目依赖一致，避免冲突。
• 生产环境下建议使用 CDN 的压缩版本以优化加载性能。
• 若项目使用微前端方案，需在主应用中统一管理 React 的暴露。