如何在HTML中正确导入并使用ES模块导出的JavaScript函数_网络技术

发布时间 - 2026-01-08 00:00:00 点击率：次

本文详解如何通过es模块机制将外部js文件中用export声明的函数导入html页面并在内联脚本中调用，重点解决`type="module"`的正确用法、路径规范及常见错误规避。

要在HTML中使用ES模块（ECMAScript Modules）导入并执行外部JavaScript文件中导出的函数，必须严格遵循模块化语法与浏览器加载规则。你提供的代码存在两个关键问题：一是标签内混合src与内联代码会导致语法无效且被浏览器忽略。

✅ 正确做法是分离声明与调用：使用一个独立的内联模块脚本（无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逻辑。