require引入的JS函数在onclick中提示未定义的原因排查

这个报错的核心原因是模块化作用域的隔离性：

当你用require('./lib/custom')引入模块时，CommonJS（或基于它的打包工具如Webpack/Browserify）会给每个模块创建独立的作用域。你在custom.js里定义的nullifyLorem函数，默认只存在于该模块的内部作用域中，并不会自动挂载到浏览器的全局window对象上。而HTML里的onclick="nullifyLorem()"是在全局作用域中查找这个函数，自然会提示“未定义”。

下面是几种可行的解决方法：

方法1：将函数暴露到全局作用域（快速但不推荐） #

直接在custom.js里把函数挂载到window对象上，让全局作用域能访问到它：

// root/assets/js/lib/custom.js
window.nullifyLorem = function(){ 
  document.getElementById("loremIpsum").innerHTML = "loremNullified" 
};

这种方式虽然能快速解决问题，但会污染全局命名空间，容易引发变量冲突，不建议在复杂项目中使用。

方法2：使用模块化导出+事件监听（推荐） #

这是更符合现代前端模块化规范的做法，避免全局污染：

第一步：在custom.js中导出函数 #

// root/assets/js/lib/custom.js
module.exports = function nullifyLorem(){ 
  document.getElementById("loremIpsum").innerHTML = "loremNullified" 
};
// 或者导出为对象属性，方便后续导出多个函数
// module.exports = { nullifyLorem };

第二步：在app.js中导入并绑定事件监听 #

// root/assets/js/app.js
const nullifyLorem = require('./lib/custom');

// 确保DOM加载完成后再绑定事件
document.addEventListener('DOMContentLoaded', () => {
  const button = document.querySelector('.button');
  button.addEventListener('click', nullifyLorem);
});

第三步：移除HTML中的onclick属性 #

<button class="button">ClickMe!</button>

这种方式把事件逻辑完全放在JS代码中管理，既符合模块化原则，也便于后续维护和调试。

额外说明 #

你之前的require引入没有报错，是因为Node.js或打包工具成功加载并执行了custom.js里的代码，但函数没有被暴露到全局，所以只有模块内部能访问它，全局作用域是看不到的。

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