如何在HTML中正确导入并使用ES6模块化的JavaScript函数

本文详解如何通过es模块（type=”module”）在html中导入并调用外部js文件中导出的函数，包括正确语法、常见错误规避及浏览器兼容性要点。

在现代前端开发中，使用 es6 模块（ecmascript Modules）是组织和复用 javaScript 代码的标准方式。但需注意：html 中不能同时在 ——这是无效的，浏览器会忽略内联脚本内容，仅加载并执行 src 指向的模块文件。

✅ 正确做法是：使用内联模块脚本显式导入并调用函数，如下所示：

⚠️ 同时，请确保你的 script.js 文件使用了有效的 ES 模块语法（你已正确使用 export function test() {…}），且文件路径相对 HTML 文件位置准确（例如两者在同一目录下）。

❌ 错误写法（会导致 test is not defined 或静默失败）：

立即学习“Java免费学习笔记（深入）”；

? 补充说明：

• 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 页面中。