HTML项目的script.js中导入项目内自定义函数报错如何解决？

核心错误原因 #

你之前能正常运行的项目是在Node.js环境下执行的，Node.js默认支持CommonJS模块化规范，内置了require引入方法、module/exports导出对象，所以就算没有package.json也能直接跑。
而浏览器原生不支持CommonJS规范，既没有内置的require方法，也无法识别module.exports语法，你直接把Node专用的JS文件放到浏览器环境执行，会导致引入逻辑完全失效，最终调用stringOfZeros时抛出「不是函数」的报错。

解决方案 #

有两种常用的改造方案可选：

方案1：使用浏览器支持的ESM（ES模块）规范 #

这是现在前端标准化的模块化方案，Node.js也同时兼容该规范。

1. 改造helperFuncs.js的导出语法，替换原来的module.exports：

function stringOfZeros(numZeros) {
  //takes in a number and outputs a string with that many zeros;
  ...
}

export { stringOfZeros }

2. 改造script.js的引入语法，替换原来的require：

// 放在script.js文件最顶部，不能写在load事件监听器内部
import { stringOfZeros } from './helperFuncs.js'

window.addEventListener('load', () => {
  // 你的原有逻辑
  let myZeroString = stringOfZeros(17);
  console.log(myZeroString);
})

3. 在index.html中引入script.js时，必须添加type="module"属性，告知浏览器该文件是ES模块：

<script src="./script.js" type="module"></script>

注意：ESM规范不支持直接用file://协议打开HTML文件执行，需要启动本地静态服务（比如VSCode的Live Server插件）访问才可以正常加载模块。

方案2：不使用模块化，直接暴露全局函数 #

适合小型项目，不需要复杂模块化的场景。

1. 改造helperFuncs.js，删除module.exports，直接把函数挂载到浏览器全局对象window上：

function stringOfZeros(numZeros) {
  //takes in a number and outputs a string with that many zeros;
  ...
}

window.stringOfZeros = stringOfZeros

2. 在index.html中按顺序引入JS文件，先引入工具函数文件，再引入业务逻辑文件：

<script src="./helperFuncs.js"></script>
<script src="./script.js"></script>

3. 直接在script.js中调用函数即可，不需要写任何引入逻辑：

window.addEventListener('load', () => {
  let myZeroString = stringOfZeros(17);
  console.log(myZeroString);
})

疑问解答 #

• 不需要创建package.json：package.json是Node.js项目的配置文件，纯前端浏览器项目运行完全不需要该文件。
• 确实需要把require替换为import，但不是只替换关键字就可以，需要同步修改导出语法、给script标签加type="module"属性才能正常运行。

内容的提问来源于stack exchange，提问作者Todd R