如何从外部JS文件引用JavaScript类？HTML无法识别外部类怎么解决

• ES Module 作用域隔离：你引入JS文件时用了type="module"，这类模块的顶层变量、类默认都是模块私有，不会挂载到全局window对象，普通script标签（非module类型）无法直接访问模块内部定义的内容。
• 执行时序问题：type="module"的脚本默认带defer属性，会等到整个DOM解析完成后才执行，如果你页面中用来实例化类的script标签是普通类型，没有加延迟执行配置，会在模块脚本加载执行前就运行，此时类还未完成定义。
• 变量命名冲突：你写的let class1 = new class1()中，实例变量名和类名完全一致，会触发暂时性死区规则，当前作用域内的class1会被未初始化的变量覆盖，就算类存在也会抛出未定义错误。

1. 先修复命名问题
   建议遵循JS类名首字母大写的规范，将类名改为Class1，实例变量名用其他名称，比如：

let myClass1 = new Class1();

避免命名冲突导致的低级错误。

2. 解决作用域隔离问题，二选一即可：

• 方案A：手动挂载到全局
  如果需要在普通script标签中直接访问类，可在class1.js的末尾添加代码，将类暴露到全局：

window.Class1 = class1;

• 方案B：统一使用ES Module规范
  把页面中实例化类的script标签也改为module类型，同时按模块规范导出导入类：
  1. 修改class1.js，添加导出语句：

  export { class1 as Class1 };
  

  2. 修改HTML中的实例化script标签，添加type="module"属性，开头导入类后再实例化：

  <script type="module">
    import { Class1 } from '../class1.js';
    let myClass1 = new Class1();
  </script>
  

3. 保证执行时序
   如果你用方案A手动挂载全局，需要把实例化类的script标签放在body标签的末尾，或者给该script标签添加defer属性，确保模块脚本执行完成后再运行实例化代码。

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