如何用esbuild打包纯JavaScript并从HTML调用导出的test函数

esbuild默认会把代码打包成封闭的模块，你export的test函数不会自动暴露到全局window对象上，所以HTML里的内联onclick="test()"找不到这个函数。下面是几种可行的解决方法：

• 方法1：手动将函数挂载到全局window对象
  修改你的index.js，在最后把test函数挂载到window上：

// index.js
// ... 导入其他模块 ...
export function test() {
  alert("I'm using some modules");
}

// 将函数暴露到全局
window.test = test;

打包后，HTML里的内联点击事件就能直接调用test()了，记得确保HTML里已经引入了打包后的脚本：

<!-- index.html -->
<div onclick="test()">test</div>
<script src="www/main.js"></script>

• 方法2：使用事件绑定替代内联onclick（推荐）
  这种方式不需要暴露全局变量，更符合现代前端开发规范：

1. 给HTML里的div添加一个ID：

<!-- index.html -->
<div id="testButton">test</div>
<script src="www/main.js"></script>

2. 修改index.js，在DOM加载完成后绑定点击事件：

// index.js
// ... 导入其他模块 ...
function test() {
  alert("I'm using some modules");
}

// 等待DOM加载完成后绑定事件
document.addEventListener('DOMContentLoaded', () => {
  document.getElementById('testButton').addEventListener('click', test);
});

• 方法3：通过esbuild参数暴露整个模块为全局对象
  如果你的模块有多个需要暴露的函数，可以用esbuild的--global-name参数，将整个模块挂载到全局：
  执行打包命令时加上该参数：

esbuild index.js --outfile=www/main.js --bundle --global-name=MyApp

然后在HTML里通过全局对象调用函数：

<!-- index.html -->
<div onclick="MyApp.test()">test</div>
<script src="www/main.js"></script>

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