如何在HTML中访问React项目打包后的checkPrimeNumber函数？

问题原因 #

create-react-app默认的打包机制会将代码封装在ES模块作用域内，自定义函数不会自动暴露到全局window对象，因此直接在HTML中调用会提示函数未定义。

解决方法 #

方法一：将函数挂载到全局window对象 #

在定义checkPrimeNumber函数的文件中，手动将其挂载到window对象上，使其成为全局可访问的函数：

// 定义质数判断函数
function checkPrimeNumber(num) {
  if (num <= 1) return false;
  for (let i = 2; i <= Math.sqrt(num); i++) {
    if (num % i === 0) return false;
  }
  return true;
}

// 挂载到全局window对象
window.checkPrimeNumber = checkPrimeNumber;

执行npm run build打包后，在HTML中即可直接调用该函数：

<script>
  // 测试调用
  console.log(checkPrimeNumber(11)); // 输出true
</script>

方法二：使用UMD格式导出函数（适用于独立模块） #

如果函数放在单独的工具模块中，可采用UMD（Universal Module Definition）格式导出，兼容多种模块规范同时支持全局调用：

比如创建src/utils/primeChecker.js文件：

(function (root, factory) {
  if (typeof define === 'function' && define.amd) {
    define([], factory);
  } else if (typeof module === 'object' && module.exports) {
    module.exports = factory();
  } else {
    root.checkPrimeNumber = factory();
  }
}(typeof self !== 'undefined' ? self : this, function () {
  return function checkPrimeNumber(num) {
    if (num <= 1) return false;
    for (let i = 2; i <= Math.sqrt(num); i++) {
      if (num % i === 0) return false;
    }
    return true;
  };
}));

在项目入口文件src/index.js中引入该模块：

import './utils/primeChecker';

打包后同样可以在HTML中直接调用checkPrimeNumber函数。

注意事项 #

• 如果函数定义在React组件内部，需确保组件已完成渲染，否则函数可能尚未挂载到全局；建议将全局调用的函数定义在组件外部的独立文件中。
• 避免过度使用全局变量，仅在必要时采用上述方法，否则可能导致命名冲突。

内容的提问来源于stack exchange，提问作者satish patel