本文详解如何通过es模块机制将外部js文件中用export声明的函数导入html页面并在内联脚本中调用，重点解决`type="module"`的正确用法、路径规范及常见错误规避。
要在HTML中使用ES模块（ECMAScript Modules）导入并执行外部JavaScript文件中导出的函数，必须严格遵循模块化语法与浏览器加载规则。你提供的代码存在两个关键问题：一是
✅ 正确做法是分离声明与调用：使用一个独立的内联模块脚本（无src属性），通过import语句从本地文件导入所需函数：
ES Module Import Example
⚠️ 注意事项：
- script.js 必须与HTML文件同源（推荐放在同一目录），路径需以 ./ 或 ../ 开头（相对URL），不能省略协议或斜杠（如 script.js ❌，./script.js ✅）；
- 浏览器仅支持原生ES模块在本地服务器环境（如 http://localhost:3000）或file://协议下运行（部分浏览器对file://有跨域限制，建议使用轻量服务器如 npx serve 或 VS Code Live Server）；
- export function test() {...} 是默认命名导出，必须用 { test } 解构导入；若使用 export default function test() {...}，则应写为 import test from './script.js'；
- 模块脚本自动启用严格模式，且具有顶层作用域隔离——变量不会污染全局window，确保模块安全性。
? 小结：ES模块导入不是“引入后自动可用”，而是需显式import声明+主动调用。坚持“一个模块脚本只做一件事”（导入+执行），即可安全、清晰地复用外部JS逻辑。
立即学习“Java免费学习笔记（深入）”；
