type="module"使script默认严格模式、自动defer、作用域隔离、顶层this为undefined；import需带扩展名和有效url，不支持bare import；模块无法访问内联script变量，需用window显式共享或统一模块化配置。
type="module" 会让 script 行为完全不同
加了 type="module" 的 <script></script> 不再是传统脚本：它默认启用严格模式、自动采用 defer 行为、只在 HTML 解析完成后再执行，且模块作用域隔离——即使多个模块里都声明 let count = 0，它们也互不影响。
常见错误现象：Uncaught ReferenceError: require is not defined 或 Cannot use import statement outside a module，往往是因为混用了 CommonJS 语法（require/module.exports）或忘了给 <script></script> 加 type="module"。
- 所有
import路径必须带扩展名（如import { foo } from './utils.js'），不能写成'./utils' - 模块内顶层
this是undefined，不是window - 动态
import()返回 Promise，可用于按需加载，但静态import必须在顶层，不能放在if或函数里
ESM 模块路径必须是相对或绝对 URL，不支持 bare import
浏览器原生 ESM 不支持 Node.js 那种无前缀的导入（如 import React from 'react'）。所有 import 目标必须是有效 URL，否则会报 Failed to resolve module specifier。
使用场景：你想从 CDN 引入一个库，或组织本地模块结构。路径写错是最常见的失败原因。
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
- 正确：
import { debounce } from 'https://cdn.skypack.dev/lodash-es@4.17.21/debounce' - 正确：
import App from './app.js'（注意.js后缀） - 错误：
import App from './app'（缺少扩展名，浏览器无法解析） - 错误：
import $ from 'jquery'（bare specifier，浏览器不认识）
type="module" 脚本无法访问内联 script 中定义的变量
因为模块有独立作用域，<script>let globalVar = 42</script> 定义的 globalVar 在 <script type="module"></script> 里完全不可见——这不是 bug，是设计使然。
容易踩的坑：把初始化逻辑拆成两个 script 标签，一个普通 script 设全局配置，一个 module script 试图读取，结果 undefined。
- 如果必须共享数据，用
window显式挂载：window.APP_CONFIG = { apiBase: '/v1' }，模块里读window.APP_CONFIG - 更推荐方式：把配置也做成模块，统一
import，避免隐式依赖 - 注意：模块脚本不会阻塞 HTML 解析，所以不要指望它能读取尚未解析到的 DOM 元素，除非监听
DOMContentLoaded或用defer等效时机
开发时用本地服务器，别直接双击打开 HTML
浏览器对 file:// 协议有严格限制：跨源请求被禁、模块加载失败、import 报 net::ERR_FAILED。这和代码本身无关，是安全策略。
性能与兼容性影响：现代浏览器（Chrome 61+、Firefox 60+、Safari 10.1+）都支持 type="module"，但旧版 IE 完全不识别该属性，会直接忽略整个 script 标签——所以不能靠它做降级逻辑，得另配 nomodule。
- 快速启动本地服务：
npx serve、python3 -m http.server 8000、或 VS Code Live Server 插件 - 需要兼容老浏览器？用
<script nomodule src="fallback.js"></script>，它只在不支持模块的环境中执行 - 构建工具（如 Vite、Webpack）默认处理模块路径和 polyfill，但纯 HTML 开发时，路径细节和协议限制就是硬门槛
type="module" 就完事，路径、作用域、加载时机、运行环境这四点卡住一个，整个模块链就断掉。尤其本地开发时，file:// 和路径后缀这两个点，几乎每个新手都会撞一次墙。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
