在浏览器中加载ES模块需用，支持相对/绝对路径和完整URL，禁用裸导入；自动defer且强制CORS；内联模块import须为字符串字面量，动态导入可用import()函数。
在浏览器中直接加载 JavaScript ES Modules，关键在于使用 <script type="module"></script> 标签，而非传统的 <script></script>。
必须用 type="module" 声明
普通 <script></script> 会以 CommonJS 或全局脚本方式执行，不支持 import/export。只有显式声明 type="module"，浏览器才会启用 ES 模块解析机制：
<script type="module" src="./main.js"></script>
即使模块内没有 import/export，只要加了 type="module"，该脚本就运行在模块作用域中（变量不会泄漏到全局）。
模块路径需符合浏览器规范
浏览器对模块路径有严格要求：
立即学习“Java免费学习笔记（深入）”；
- 相对路径（如
./utils.js、../lib/index.js）✅ 支持 - 绝对路径（如
/js/app.js）✅ 支持（从根目录开始） - 完整 URL（如
https://cdn.example.com/lodash-es.js）✅ 支持（需 CORS 允许） - 裸导入（如
import { debounce } from 'lodash-es'）❌ 不支持 —— 浏览器不内置包解析，必须写明确路径
默认是 defer 行为，且自动启用 CORS
type="module" 脚本天然具有 defer 特性：下载异步、执行等待 DOM 解析完成、保持顺序。无需额外加 defer 属性。
同时，所有模块请求都强制启用 CORS（即使是同源），所以若模块来自本地文件系统（file:// 协议），会因缺少 CORS 头而报错。解决方法：
- 用本地开发服务器（如
npx serve、python3 -m http.server） - 避免直接双击 HTML 打开
可以内联模块，但 import 必须是字符串字面量
内联模块写法合法：
<script type="module">
import { hello } from './greeting.js';
hello('World');
</script>
但注意：import 后的模块说明符必须是字符串字面量（不能是变量或表达式），否则语法错误：
<script type="module">
const lib = './utils.js';
import { foo } from lib; // ❌ SyntaxError: Unexpected identifier
</script>
动态导入可用 import() 函数实现（返回 Promise）：
<script type="module">
const lib = './utils.js';
const { foo } = await import(lib); // ✅ 合法
</script> 
