本文详解如何通过es模块（type="module"）在html中导入并调用外部js文件中导出的函数，包括正确语法、常见错误规避及浏览器兼容性要点。
在现代前端开发中，使用 ES6 模块（ECMAScript Modules）是组织和复用 JavaScript 代码的标准方式。但需注意：HTML 中不能同时在 <script type="module"> 标签中指定 src 属性又内联执行代码（如 test();）</script>——这是无效的，浏览器会忽略内联脚本内容，仅加载并执行 src 指向的模块文件。
✅ 正确做法是：使用内联模块脚本显式导入并调用函数，如下所示：
<script type="module">
import { test } from "./script.js";
test(); // ✅ 正常输出 'test'
</script>⚠️ 同时，请确保你的 script.js 文件使用了有效的 ES 模块语法（你已正确使用 export function test() {...}），且文件路径相对 HTML 文件位置准确（例如两者在同一目录下）。
❌ 错误写法（会导致 test is not defined 或静默失败）：
立即学习“Java免费学习笔记（深入）”；
<!-- ❌ 错误：type="module" + src + 内联代码 = 不生效 --> <script type="module" src="./script.js"> test(); // 这行不会执行！ </script>
? 补充说明：
- type="module" 启用 ES 模块特性，自动启用严格模式，并默认延迟执行（类似 defer）；
- 模块路径必须是相对路径（如 ./script.js）或绝对路径（如 /js/script.js），不支持无协议的裸路径（如 script.js）或 Node.js 风格包名；
- 浏览器需支持 ES 模块（Chrome 61+、Firefox 60+、Safari 10.1+、Edge 16+），本地直接双击打开 HTML 文件（file:// 协议）可能因 CORS 策略报错，建议通过本地服务器运行（如 VS Code 的 Live Server 插件、npx serve 或 python3 -m http.server）；
- 若需全局暴露函数供非模块脚本使用，应避免混合模块与传统脚本，可改用构建工具（如 Vite、Webpack）打包，或采用 IIFE + 全局挂载（不推荐用于新项目）。
✅ 最佳实践小结：
- 模块导入必须在 type="module" 脚本中完成；
- 导入语句必须位于脚本顶部（静态分析要求）；
- 函数调用放在 import 之后即可；
- 开发时优先使用本地 HTTP 服务，避免 file:// 协议限制。
遵循以上规范，即可安全、清晰地将模块化 JavaScript 函数集成进 HTML 页面中。
