umi是如何暴露react

umi 暴露 React 的原理

umi 通过 webpack 的 externals 配置将 React 暴露为全局变量。在 umi 的配置中，默认会将 React 和 ReactDOM 设置为外部依赖，这样它们不会被打包到最终的代码中，而是通过全局变量 window.React 和 window.ReactDOM 访问。

配置方式

在 umi 项目中，可以通过修改 config/config.js 或 .umirc.js 文件来调整 React 的暴露行为。以下是一个示例配置：

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

使用 CDN 引入 React

为了确保全局变量可用，通常需要在 HTML 中通过 CDN 引入 React 和 ReactDOM。例如：

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

优势与注意事项

• 减少打包体积：通过外部化 React，可以避免将 React 库重复打包到多个 chunk 中。
• 依赖管理：确保项目中使用的 React 版本与 CDN 提供的版本一致。
• 调试方便：在开发环境中可以直接通过全局变量访问 React，方便调试。

需要注意的是，如果项目需要离线运行或对 CDN 稳定性有要求，可能需要考虑其他方案，如将 React 打包到项目中。