本文详解如何通过es模块机制将外部js文件中用export声明的函数导入html页面并在内联脚本中调用，重点解决`type="module"`的正确用法、路径规范及常见错误规避。
要在HTML中使用ES模块（ECMAScript Modules）导入并执行外部JavaScript文件中导出的函数，必须严格遵循模块化语法与浏览器加载规则。你提供的代码存在两个关键问题：一是<script type="module" src="...">标签不允许同时包含内联脚本内容（即不能在带src属性的模块脚本中写test();），二是直接在<script>标签内混合src与内联代码会导致语法无效且被浏览器忽略。
✅ 正确做法是分离声明与调用：使用一个独立的内联模块脚本（无src属性），通过import语句从本地文件导入所需函数：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ES Module Import Example</title>
<!-- ✅ 正确：纯内联模块脚本，显式导入并调用 -->
<script type="module">
import { test } from './script.js';
test(); // 输出: "test"
</script>
</head>
<body>
</body>
</html>⚠️ 注意事项：
- 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免费学习笔记（深入）”；
