如何从HTML页面中调用JavaScript module内定义的函数

ES Module 存在独立的模块作用域，模块内部定义的函数、变量默认仅在模块内部可访问，不会自动挂载到全局window对象上。而HTML行内的onclick事件触发时，只会在全局作用域查找对应的函数，因此会抛出greet is not defined的错误。

以下方案均满足app.js必须标记为module类型的要求： #

方案1：手动将函数挂载到全局作用域 #

改动最小，不需要修改HTML代码，适合临时快速修复场景，直接修改app.js：

function greet() {
  alert('Hello');
}
// 新增代码，将greet函数绑定到全局window对象
window.greet = greet;

方案2：模块内部绑定DOM事件（更推荐） #

不会污染全局作用域，符合模块化开发规范，需要同步修改HTML和JS代码：

1. 给按钮添加唯一ID，删除行内onclick属性，修改后的index.html：

<html>
<head>
  <script type="module" src="app.js"></script>
</head>
<body>
  <button id="greetBtn">Greetings from module</button>
</body>
</html>

2. 在app.js中选中按钮，手动绑定点击事件：

function greet() {
  alert('Hello');
}

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

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