通过将 React 组件或工具函数挂载到全局 window 对象上，可在外部 HTML 文件中直接调用该函数；本文以 checkPrimeNumber() 为例，详解实现步骤、注意事项及安全建议。
通过将 react 组件或工具函数挂载到全局 `window` 对象上，可在外部 html 文件中直接调用该函数；本文以 `checkprimenumber()` 为例，详解实现步骤、注意事项及安全建议。
在使用 create-react-app 构建的 React 应用中，所有代码默认运行在模块作用域内（ES Module），经 Webpack 打包后生成的 bundle.js 会将变量和函数封装在闭包中，不会自动暴露到全局 window 对象。因此，即使你已通过 <script src="bundle.js"> 引入构建产物，在 HTML 中直接调用 checkPrimeNumber(7) 也会报错：ReferenceError: checkPrimeNumber is not defined。</script>
✅ 正确做法：显式挂载到 window
在 React 应用的入口文件（如 src/index.js 或 src/App.js）中，将目标函数赋值给 window 对象：
// src/index.js（推荐放在 ReactDOM.render 之后，确保执行时机）
import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';
// 定义工具函数（可位于任意文件，但需在此处导入并暴露）
const checkPrimeNumber = (num) => {
if (num );
构建后（npm run build），在 HTML 中即可安全调用：
<title>React Bundle Demo</title><div id="root"></div>
<script src="./build/static/js/main.[hash].js"></script><script>
// ✅ 现在可以正常使用
console.log(window.checkPrimeNumber(17)); // true
console.log(checkPrimeNumber(15)); // false（window 可省略）
</script>
⚠️ 注意事项与最佳实践
- 避免污染全局命名空间：建议为函数添加唯一前缀，例如 window.myAppCheckPrimeNumber，防止与其他脚本冲突。
- 确保执行顺序：window.xxx = fn 必须在函数定义之后、且在 bundle 执行完成时生效；不要放在组件内部或异步回调中（如 useEffect），否则可能因执行时机不确定而失败。
- 生产环境慎用：全局挂载会增加安全风险（如 XSS 攻击面扩大）和维护复杂度。仅在确实需要与非 React 页面交互（如遗留系统集成、CMS 插件）时采用。
- 替代方案考虑：若场景允许，优先使用标准通信方式——例如通过 postMessage 与 iframe 通信，或封装为 Web Component，而非依赖全局函数。
? 验证是否成功暴露
在浏览器控制台中运行以下命令，确认函数已正确挂载：
console.log(typeof window.checkPrimeNumber); // 应输出 "function"
console.log(window.checkPrimeNumber.toString().includes('prime')); // 快速验证来源
只要遵循上述方法，即可稳定、可靠地从 HTML 中调用 React 应用内的纯函数逻辑。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
