HTML引入含import语句的外部JS后导出函数全局调用失效问题

问题根因 #

你遇到的问题本质是ES模块的作用域隔离特性导致的：
当JS文件中出现import/export语法时，浏览器会强制将其识别为ES模块，你HTML中引入Main.js时也加了type="module"属性符合规范，但ES模块内的所有变量、函数默认都是模块私有的，你导出的doubleIt方法不会自动挂载到全局window对象上，所以普通脚本作用域下的update函数找不到doubleIt方法，就会报错功能失效。
另外如果导入的./OtherClass.js路径错误、加载失败，也会导致整个Main.js模块加载中断，可先打开浏览器控制台排查具体报错类型。

解决方案 #

方案1：最小改动快速修复

直接在Main.js中将需要全局调用的方法手动挂载到window对象，原有其他代码无需修改：

import "./OtherClass.js";

export function doubleIt(input) {
  return input + input;
}

// 新增：将方法暴露到全局作用域
window.doubleIt = doubleIt;

方案2：遵循ES模块规范的标准写法（更推荐，无全局污染）

1. 先删除textarea标签上的内联oninput="update()"属性
2. 将原内联普通脚本改为ES模块，导入doubleIt后通过事件绑定实现交互：

<script type="module">
  // 从模块中导入需要的方法
  import { doubleIt } from './src/Main.js';
  
  const input = document.getElementById("input");
  const output = document.getElementById("output");

  function update() {
    output.value = doubleIt(input.value);
  }

  // 绑定输入事件
  input.addEventListener('input', update);
</script>

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