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 暴露到全局作用域，确保项目正常运行。
