ES6模块绑定Window.prototype后无法在HTML中使用，原因是什么？

一、ES6模块内部调用showPlayerName失败的原因 #

• 导出/导入语法不匹配：如果导出用export default showPlayerName，但导入时用import { showPlayerName } from './xxx.js'（具名导入），或者反过来用默认导入接收具名导出的函数，会导致导入的变量为undefined，调用自然失败。
• 模块路径错误：导入时的文件路径写错（比如相对路径漏加./、文件名拼写错误），会导致模块加载失败，函数根本没被导入到当前模块作用域中。
• 函数定义本身存在问题：比如函数内部有语法错误、定义时函数名拼写错误（如写成showPlayName），会导致函数无法正常被定义或导出。

二、挂载到Window.prototype后普通script调用报错的原因 #

• 脚本执行时机不匹配：ES6模块脚本默认是延迟执行（类似添加defer属性的script），会等到DOM解析完成后才运行；而普通script标签（无defer/async）是同步执行，解析到就立即运行。如果普通script在模块script之前，或者虽然在后面但模块还未完成加载执行，此时showPlayerName还没被挂载到原型上，自然会报“未定义”错误。
• 挂载逻辑存在问题：如果模块内部导入showPlayerName失败（比如前面提到的导入错误），挂载到Window.prototype的其实是undefined，即使时机对了，调用时也会报错；另外，若直接调用showPlayerName()，浏览器会优先查找全局作用域（即window的自有属性），虽然原型链上有该方法，但更稳妥的写法是直接挂载到window对象上：window.showPlayerName = showPlayerName，避免原型链解析优先级带来的问题。

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