在 React 项目中定义的函数（如 checkPrimeNumber）默认无法直接从外部 HTML 脚本访问，因其作用域被模块封装；需显式挂载到全局 window 对象上，才能在构建后的 bundle 中被外部调用。
在 react 项目中定义的函数（如 `checkprimenumber`）默认无法直接从外部 html 脚本访问，因其作用域被模块封装；需显式挂载到全局 `window` 对象上，才能在构建后的 bundle 中被外部调用。
当你使用 create-react-app 开发并执行 npm run build 后，React 会将整个应用打包为一个或多个优化后的 JavaScript 文件（如 main.[hash].js），这些文件默认采用模块化封装（ES Modules 或 IIFE），所有导出函数均处于闭包作用域内，不会自动暴露到全局 window 对象。因此，即使你在 App.js 或其他组件中定义了如下函数：
// src/App.js
function checkPrimeNumber(num) {
if (num < 2) return false;
for (let i = 2; i <= Math.sqrt(num); i++) {
if (num % i === 0) return false;
}
return true;
}
// ✅ 关键：显式挂载到 window，使其全局可访问
window.checkPrimeNumber = checkPrimeNumber;⚠️ 注意事项：
- 挂载操作必须在函数定义后、且确保执行时机早于 HTML 中的调用（推荐放在入口文件 src/index.js 或主组件 App.js 的顶层作用域中）；
- 若使用函数组件或 Hook，避免在渲染函数内重复赋值 window.checkPrimeNumber，防止多次覆盖或副作用；
- 生产环境建议添加命名空间前缀（如 window.myAppCheckPrimeNumber），避免全局污染和命名冲突；
- 不推荐长期依赖全局挂载方式——它违背 React 的封装原则；仅适用于轻量级集成场景（如遗留系统嵌入、A/B 测试钩子、调试工具等）。
构建并部署后，在 HTML 中即可安全调用：
<!DOCTYPE html>
<html>
<head><title>React Bundle Integration</title></head>
<body>
<div id="root"></div>
<script src="./static/js/main.[hash].js"></script>
<script>
// ✅ 现在可以正常调用
console.log(window.checkPrimeNumber(17)); // true
console.log(window.checkPrimeNumber(15)); // false
</script>
</body>
</html>总结：React 打包产物默认不暴露内部函数，通过 window.xxx = xxx 是简单有效的桥接方案；但应审慎使用，优先考虑通过标准接口（如自定义事件、Web Components 封装或微前端通信机制）实现更健壮的跨环境交互。
立即学习“Java免费学习笔记（深入）”；
