本文详解 Web 开发新手常犯的模块加载错误：在 HTML 中直接调用未显式导入的 ES 模块导出函数会导致 ReferenceError，核心在于理解 的作用域隔离机制与显式 import 的必要性。
本文详解 web 开发新手常犯的模块加载错误：在 html 中直接调用未显式导入的未显式导入的 es 模块导出函数会导致 `referenceerror`，核心在于理解 `<script type="module">` 的作用域隔离机制与显式 `import` 的必要性。</script>
在使用原生 ES 模块（ESM）进行前端开发时，一个高频误区是认为只要通过 <script type="module" src="..."> 加载了模块文件，其导出的变量或函数就会自动“挂载”到全局作用域，从而可在页面任意 <script> 标签中直接调用。事实恰恰相反：<strong>ES 模块具有严格的词法作用域和封闭性，模块内的声明不会泄漏到全局，必须通过显式 import 才能使用。</script>
以你的代码为例：
<html>
<head>
<script type="module" src="./index.js"></script> <!-- ✅ 加载模块，但仅执行其顶层代码 -->
</head>
<body>
<p>Hello!</p>
<script>
myJavascriptFunc(); // ❌ ReferenceError: myJavascriptFunc is not defined
</script>
</body>
</html>虽然 index.js 被成功加载并执行（例如其中的 export 语句被解析），但 myJavascriptFunc 仅存在于 index.js 模块自身的私有作用域内。而 <script> 标签（无 type="module"）运行在<strong>经典脚本（classic script）上下文中，它既无法访问模块作用域，也无法感知 export 声明——二者完全隔离。</script>
立即学习“Java免费学习笔记（深入）”；
✅ 正确做法是：在另一个 <script type="module"> 中显式导入所需成员</script>：
<html>
<head>
<!-- 可选：此处无需再引入 index.js，除非需预加载或复用逻辑 -->
</head>
<body>
<p>Hello!</p>
<script type="module">
import { myJavascriptFunc } from './index.js'; // ✅ 显式导入
myJavascriptFunc(); // ✅ 正常执行，输出 "inside myJavascriptFunc"
</script>
</body>
</html>? 补充说明：你也可以将导入与调用合并到一个模块脚本中（如上），或在 index.js 内部直接调用自身导出的函数（如 myJavascriptFunc()），但绝不能跨作用域隐式访问。
关键注意事项：
- type="module" 是必需的：无论是 src 引入还是内联脚本，只要涉及 import/export，就必须声明 type="module"，否则语法报错。
- 模块脚本默认延迟执行（deferred）：它们会等到 DOM 解析完成后再执行，因此无需手动监听 DOMContentLoaded。
- 模块路径需为相对或绝对 URL：import 路径不支持 bare specifiers（如 import {fn} from 'lodash'），需写成 './index.js' 或 '/js/index.js'。
- 避免混合经典脚本与模块逻辑：若必须桥接，可通过 window 显式暴露（不推荐），例如在模块中写 window.myJavascriptFunc = myJavascriptFunc，但这违背模块化设计原则，应优先采用 import 方式组织依赖。
总结来说，ES 模块不是“全局注册表”，而是“显式依赖图”。理解并遵循 import/export 的显式契约，是构建可维护、可测试现代前端代码的第一步。从今天起，请牢记：有 export，必有 import；无 import，无访问权。
