使用Parcel打包器时，HTML按钮无法调用JS函数的问题求助

嘿，这个问题我之前也踩过坑！核心原因是Parcel默认会把你的JavaScript文件当作ES模块处理，模块里定义的函数只会存在于模块的局部作用域中，不会自动挂载到全局的window对象上。而HTML里的onclick="test()"是在全局作用域下去找test函数的，自然就会报ReferenceError啦。

给你几个可行的解决方案：

方案1：把函数挂载到全局window对象 #

直接在你的index.js里把test函数绑定到window上，这样全局作用域就能访问到它了：

// index.js文件
function test() {
  console.log("test");
}
// 挂载到window，让全局能访问
window.test = test;

你的HTML代码不用改，保持原来的<button onclick="test()">Click</button>就行。

方案2：使用事件监听替代内联onclick（更推荐） #

这种方式不用污染全局作用域，是现代前端开发更规范的写法：
首先修改HTML，给按钮加个唯一ID：

<button id="testButton">Click</button>
<script src="./js/index.js"></script>

然后在index.js里通过ID获取按钮，添加点击事件监听：

// index.js文件
function test() {
  console.log("test");
}

document.getElementById('testButton').addEventListener('click', test);

补充：为什么会出现这个错误？ #

Parcel作为打包工具，会严格按照ES模块的规则处理你的代码——每个JS文件都是一个独立的模块，模块内部的变量、函数默认都是私有的，不会暴露到全局上下文。而内联的onclick属性是在全局环境中执行的，所以找不到模块里的test函数。

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