在html中通过启用原生es模块机制，强制严格模式、延迟执行、作用域隔离、同源/cors策略及.js路径要求，与传统脚本行为完全不同。
在 HTML 中通过 <script type="module"></script> 加载 JavaScript 模块，是现代浏览器原生支持的 ES 模块（ESM）加载方式。它让代码具备真正的模块作用域、静态导入导出、顶层 await 等能力，且默认以严格模式运行。
基本用法：内联模块脚本
直接在 <script type="module"></script> 标签中写模块代码，可使用 import 和 export：
<script type="module">
import { foo } from './utils.js';
console.log(foo()); // 正常执行
</script>
注意：这种内联脚本无法直接访问全局作用域中的变量（如 window 上挂载的），也不受外部普通脚本影响——模块有独立作用域。
引入外部模块文件
更常见的是引用外部 .js 文件，路径必须是相对或绝对 URL（不能省略扩展名，也不能用 bare specifier）：
<script type="module" src="./main.js"></script>
- ✅ 支持
./、../、/开头的路径 - ✅ 支持完整 URL，如
https://cdn.example.com/lib.mjs - ❌ 不支持无扩展名的路径（
./utils报错） - ❌ 不支持 Node 风格的裸导入（
import _ from 'lodash'会失败）
与传统脚本共存和执行时机
type="module" 脚本天然具有以下特性：
- 自动延迟执行（
defer行为）：不阻塞 HTML 解析，按顺序执行，且等 DOM 构建完成后再运行 - 不会与
<script></script>（非 module）共享顶层作用域 - 若需两者通信，可通过
window显式挂载、CustomEvent、或 shared state 对象（如window.myApp = {}） - 可同时存在多个
type="module"，它们之间按import依赖图拓扑排序执行
常见问题与注意事项
- 模块脚本必须通过 HTTP(S) 协议加载（
file://协议下多数浏览器会因 CORS 拒绝模块导入） - 模块中
this在顶层为undefined（严格模式限制） - 动态导入可用
import('./module.js')，返回 Promise，可在非模块脚本中调用 - 如需兼容旧浏览器，需搭配构建工具（如 Vite、Webpack）转译，或用
<script nomodule></script>提供降级方案
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
