本文详解在浏览器中使用 ES 模块（type="module"）时，为何 import 语句因缺少文件扩展名而失效，并提供正确写法、验证方法及关键注意事项。
本文详解在浏览器中使用 es 模块（`type="module"`）时，为何 `import` 语句因缺少文件扩展名而失效，并提供正确写法、验证方法及关键注意事项。
在现代浏览器中启用原生 ES 模块支持时，<script type="module"> 是必需的——这一点你已正确使用。但一个常被忽略的关键约束是：<strong>浏览器模块解析器要求动态导入路径必须包含明确的文件扩展名（如 .<a style="color:#f60; text-decoration:underline;" title= "js"href="https://m.php.cn/zt/15802.html" target="_blank">js），不支持自动补全或省略。</script>
你原始代码中的问题就出在这里：
// ❌ 错误：缺少 .js 扩展名，浏览器无法定位模块
import { print } from "./func";
虽然 Node.js 或某些打包工具（如 Webpack、Vite）支持省略扩展名，但纯浏览器环境不支持这种“扩展名自动推导”。因此，即使 func.js 与 main.js 同目录，浏览器仍会发起对 ./func（无扩展名）的 HTTP 请求，最终返回 404，导致整个模块加载失败——进而使 main.js 不执行，页面无任何输出。
✅ 正确写法如下（显式添加 .js）：
// ✅ 正确：路径必须完整，含 .js 扩展名
import { print } from "./func.js";
print();
同时，请确保 func.js 的导出语法正确（你已做到）：
// func.js
export function print() {
document.getElementById("display").innerHTML += "Hello";
}
? 额外注意事项：
- 服务器环境必要性：HTML 文件不能直接双击用 file:// 协议打开（会触发 CORS 策略阻止模块加载）。务必通过本地服务器运行（如 VS Code 的 Live Server 插件、npx serve 或 WebStorm 内置服务器）。
- MIME 类型要求：服务端需为 .js 文件返回 Content-Type: application/javascript，主流开发服务器默认满足。
- 严格模式自动启用：ES 模块脚本默认启用严格模式，无需手动加 'use strict';。
- 作用域隔离：每个模块拥有独立作用域，变量/函数不会污染全局，这是预期行为，非错误。
✅ 验证步骤：
- 启动本地服务器（例如在项目根目录执行 npx serve）；
- 访问 http://localhost:5000/test.html；
- 打开浏览器开发者工具 → Console / Network 标签页，确认 func.js 和 main.js 均成功加载（状态码 200）；
- 页面 中应显示 "Hello"。
总结：浏览器原生模块系统设计强调确定性与安全性，因此强制要求完整路径。养成显式书写 .js 扩展名的习惯，是避免“脚本静默失效”的最简单、最可靠实践。
Java免费学习笔记：立即使用
解锁 Java 大师之旅：从入门到精通的终极指南
