Web应用实现Firebase Authentication遇模块与函数调用问题

问题根因 #

你遇到的无法识别函数的问题是ES模块的作用域特性导致的：通过type="module"引入的JS/MJS文件运行在独立的模块作用域中，顶层定义的login、signUp函数默认不会挂载到全局window对象上，而行内onclick属性绑定的函数只会在全局作用域查找，因此触发点击时会报函数未定义的错误。
另外之前的Cannot use import statement outside a module报错，也不需要强制改文件后缀为.mjs，只要给.js文件的script标签添加type="module"属性即可正常使用import语法。

解决方案1（快速适配现有代码） #

直接在index.mjs末尾将你需要全局调用的函数手动挂载到window对象上即可，原有其他代码不需要修改：

// 原有login、signUp函数定义不变
function login() {
  window.alert("Login successful")
}

function signUp() {
  window.alert("Signup successful");
}

// 新增两行代码暴露函数到全局
window.login = login;
window.signUp = signUp;

修改后即可正常触发行内onclick绑定的点击事件。

解决方案2（更符合前端规范的写法） #

不使用行内onclick绑定，在模块内部直接给按钮绑定事件监听，不需要暴露函数到全局，避免污染全局作用域：

1. 先删除HTML中两个提交按钮的onclick = "login()"和onclick = "signUp()"属性
2. 在index.mjs末尾添加以下绑定代码：

document.querySelector('input[value="Login"]').addEventListener('click', login)
document.querySelector('input[value="Signup"]').addEventListener('click', signUp)

后续项目复杂度提升后，这种写法的可维护性更高。

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