umi是如何暴露react

umi 暴露 React 的方式

umi 通过配置 runtimePublicPath 和 chainWebpack 来暴露 React 及其相关库到全局作用域。这样可以避免多个 React 实例共存，确保项目依赖的 React 版本一致。

配置 runtimePublicPath

在 config/config.js 或 .umirc.js 中设置 runtimePublicPath 为 true，确保动态加载的脚本能正确解析 React 路径。

export default {
  runtimePublicPath: true,
};

通过 chainWebpack 配置

在配置文件中使用 chainWebpack 方法，将 React 和 ReactDOM 暴露为全局变量。

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

引入 CDN 资源

在 HTML 中通过 <script> 标签引入 React 和 ReactDOM 的 CDN 资源，确保全局变量可用。

<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>

使用 webpack 的 ProvidePlugin

通过 chainWebpack 配置 ProvidePlugin，自动注入 React 到模块中。

export default {
  chainWebpack(config) {
    config.plugin('provide').use(webpack.ProvidePlugin, [{
      React: 'react',
    }]);
  },
};

检查依赖版本

确保项目中的 React 版本与 CDN 引入的版本一致，避免版本冲突。

npm ls react

注意事项

• 避免在项目中直接安装 React 和 ReactDOM，防止多实例问题。
• 确保 CDN 资源加载顺序正确，ReactDOM 依赖 React 必须先行加载。
• 在生产环境中使用稳定的 CDN 地址，避免资源加载失败。

通过以上方法，umi 可以有效地将 React 暴露到全局作用域，确保项目正常运行。