在 `file://` 协议下，内联 `<script type="module">` 中定义的 `export` 无法被浏览器控制台或普通脚本直接访问，且无法通过 `import` 动态导入，根本原因在于模块作用域隔离与 `file://` 协议对 cors 和模块解析的严格限制。</script>
JavaScript 模块（ESM）的设计核心之一是严格的词法作用域与静态导入/导出机制。当你在 HTML 中使用：
<script type="module">
export function hello() {
console.log("hello");
}
</script>这段代码确实会执行（无报错），但 hello 仅存在于该模块的私有模块作用域中，既不会挂载到全局 window，也无法被外部脚本或浏览器控制台直接引用——这并非 bug，而是 ESM 的规范行为。
❌ 为什么控制台无法访问？
- 控制台执行的代码属于“顶层非模块脚本”（即 script 不带 type="module"），它运行在全局作用域，与模块作用域完全隔离。
- import 语句只能出现在模块顶层（即 type="module" 脚本中），控制台中输入 import {hello} from './x.js' 会立即报错：SyntaxError: import declarations may only appear at top level of a module。
- require() 是 CommonJS 规范，在原生浏览器环境中默认不存在（需借助打包工具如 Webpack 或运行时如 Node.js）。
❌ 为什么 file:// 下无法加载外部模块？
即使你将模块拆分为独立文件（如 utils.js），并在 HTML 中这样写：
<script type="module">
import { hello } from "./utils.js";
hello(); // ✅ 正常执行
</script>——在 file:// 协议下仍会失败，并出现类似错误：
立即学习“Java免费学习笔记（深入）”；
Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at file:///.../utils.js. (Reason: CORS request not http)
这是因为：浏览器模块加载器强制要求模块 URL 必须基于 http: 或 https: 协议。file:// 被明确排除在模块解析支持之外（MDN 明确说明）。这不是权限问题，而是规范层面的硬性限制。
✅ 可行的解决方案（无需 window.hello = hello）
| 方案 | 原理 | 适用场景 | 备注 |
|---|---|---|---|
| 启动本地 HTTP 服务 | 使用 python3 -m http.server 8000、npx serve 或 VS Code Live Server 插件，以 http://localhost:8000/ 访问页面 | 开发调试、离线项目原型 | ✅ 完全符合标准，支持内联模块 + 外部模块 + 动态 import()；推荐首选方案 |
| 动态 import() + 显式暴露 | 在模块内用 window.myModule = await import('./utils.js')，再在控制台调用 window.myModule.hello() | 临时调试，不推荐长期使用 | 需手动触发加载，且依赖 await（控制台需在 async 上下文中执行） |
| 使用 eval() + 字符串模块（不推荐） | 将模块内容读为字符串后 eval() 执行并挂载，绕过模块系统 | 仅限实验，存在安全与维护风险 | 违反模块设计初衷，破坏静态分析、tree-shaking 等现代特性 |
? 推荐实践：5 秒启用本地服务（Windows/macOS/Linux 通用）
# 终端进入项目目录后执行（Python 3 内置） python3 -m http.server 8000 # 或使用 npm（需安装 serve） npx serve -s # 然后访问 http://localhost:8000/test.html → 所有 ESM 功能正常工作！
此时你的原始示例可安全重构为：
<!-- test.html -->
<script type="module">
export function hello() {
console.log("hello from module!");
}
// ✅ 现在可在控制台通过以下方式间接访问（见下方）
</script>
<script type="module">
// 导出对象供调试用（仅开发阶段）
import * as mod from "./test.html"; // ❌ 不支持 HTML 作为模块源
// ✅ 正确做法：拆分为 .js 文件
</script>✅ 最佳结构建议：
<!-- test.html --> <script type="module" src="main.js"></script>
// main.js
export function hello() { console.log("hello"); }
// 可选：仅开发时挂载（用条件判断避免上线污染全局）
if (location.protocol === 'http:' || location.protocol === 'https:') {
window.DEBUG_MODULE = { hello };
}然后在浏览器控制台中：
>> DEBUG_MODULE.hello() hello
⚠️ 总结
- 没有魔法属性或隐藏 API 能让内联模块的 export 自动“泄漏”到全局或控制台；
- file:// 协议下 ESM 的功能是有意受限的，这是浏览器安全模型的一部分；
- 真实开发请拥抱 http://localhost —— 它不是额外负担，而是现代前端工作流的基石；
- 若项目必须纯离线运行（如嵌入式文档、USB 分发），应考虑将逻辑编译为 IIFE 或 UMD 格式，而非依赖原生 ESM。
模块不是“更高级的 script”，而是一套全新的执行上下文。理解并尊重它的边界，才是高效调试的前提。
