在浏览器中使用esmodule需用声明,路径须为有效url(如./math.js或https地址),模块自动defer执行且具独立作用域,调试时注意解析失败、跨域等报错。
` 运行脚本">
在浏览器原生环境中使用 ESModule 运行脚本,核心是通过 <script type="module"></script> 声明模块上下文,并确保资源加载符合模块规范。
必须添加 type="module" 属性
普通 <script></script> 标签默认是传统脚本(script),不支持 import/export;只有显式声明 type="module" 才启用 ES 模块环境:
<script type="module">
import { foo } from './utils.js';
foo();
</script>
注意:即使脚本内容是纯 JS(无 import/export),只要加了 type="module",它就运行在模块作用域中——意味着变量默认不挂载到 window,且有顶层 await 支持。
模块路径必须是有效 URL(含协议或相对路径)
浏览器对模块导入路径要求严格,不支持裸导入(如 import {x} from 'lodash'),也不支持本地文件系统路径(file:// 协议下多数模块导入会失败):
- ✅ 正确:
import './math.js'、import 'https://unpkg.com/lodash-es@4.17.21/index.js' - ❌ 错误:
import 'lodash'(无解析规则)、import '/js/math.js'(若当前页非同源根目录可能 404)
建议统一用相对路径(如 ./ 或 ../ 开头),并确保服务器能正确返回 application/javascript MIME 类型。
在 Java 中初始化和管理阿里云 SDK客户端。包括单例模式、线程安全、endpoint 与 region 配置、VPC 终端节点、同步与异步等。
模块脚本自动延迟执行,无需手动 defer
type="module" 脚本天然具有 defer 行为:下载异步、执行等待 DOM 解析完成、保持顺序。因此以下写法等效:
<script type="module" src="main.js"></script><script type="module">
import { init } from './main.js';
init();
</script>
它们都会在 HTML 解析完毕后按出现顺序执行,且不会阻塞页面渲染。
调试与常见报错提示
遇到问题时,优先检查控制台错误信息:
-
Failed to resolve module specifier→ 导入路径无效或 404,确认路径拼写和服务器路由 -
Importing from a script with type=module is not supported→ 尝试从非模块脚本(普通<script></script>)里 import,这是禁止的 -
Cross-Origin Request Blocked→ 模块资源跨域且未配CORS头,可换 CDN 或启动本地服务(如npx serve)
开发阶段强烈建议用本地 HTTP 服务启动,避免 file:// 协议限制。
Java免费学习笔记:立即使用
解锁 Java 大师之旅:从入门到精通的终极指南










