HTML中nomodule降级怎么配-html教程-PHP中文网

nomodule必须与type="module"成对使用，单独使用会导致新旧浏览器均白屏；现代浏览器跳过nomodule脚本，旧浏览器（如ie11）静默忽略整行标签；legacy脚本须为es5兼容并含polyfill。

html中nomodule降级怎么配

nomodule 必须和 type="module" 成对出现

单独写 <script nomodule src="legacy.js"></script> 会导致现代浏览器跳过、旧浏览器（比如 IE11）也静默忽略整行标签——结果是新旧用户都白屏。nomodule 不是“给旧浏览器用的开关”，而是现代浏览器的“跳过指令”。真正起作用的是组合：<script type="module" src="app.mjs"></script> 和 <script nomodule src="legacy-bundle.js"></script> 这一对。前者只被 Chrome 61+、Firefox 60+、Safari 11+ 执行；后者只被不支持 type="module" 的浏览器加载（如 IE11、Android 4.4 WebView），前提是它得能被识别为普通脚本。

legacy-bundle.js 必须是真·ES5 + 手动 polyfill

nomodule 只管加载，不管运行。哪怕脚本进了 IE11，以下任一情况都会立刻崩溃：

const、let、箭头函数、模板字符串、class → 直接 SyntaxError
fetch()、Promise、Array.from()、Object.assign() → ReferenceError 或静默失败
element.classList.add()（IE9–）、querySelector()（IE7–）、addEventListener()（IE8–）→ 报错或无响应

实操建议：

Babel 配置必须显式设 targets: { ie: "11" }，不能依赖 preset-env 默认值
core-js/stable 要手动引入，且 polyfill 代码必须在所有业务逻辑之前执行
输出格式只能是 IIFE 或 UMD，严禁含 import/export，禁用 dynamic import()
Webpack/Vite 构建时确认 build.target 或 babel-preset-env 的 targets 与实际覆盖范围一致

加载时机和执行顺序要显式控制

type="module" 脚本默认 defer，但 nomodule 脚本在旧浏览器中表现和普通 <script></script> 一样：若没加 defer 或 async，会同步阻塞 HTML 解析。容易导致 document.getElementById 返回 null，因为 DOM 还没就绪。

推荐写法：

anything-to-html

将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。

下载

现代路径：<script type="module" src="app.mjs"></script>（已 defer）
旧路径：<script nomodule defer src="legacy-bundle.js"></script>（显式加 defer，避免阻塞）

注意：DOM 顺序不影响分流逻辑，但模块优先更符合直觉，也方便构建工具生成模板。

Safari 10.1 是个特例，得 runtime 检测兜底

Safari 10.1（macOS 10.12.4 / iOS 10.3）会同时执行 type="module" 和 nomodule 脚本，导致 UI 初始化两次、事件重复绑定、请求翻倍。它识别 type="module"，却错误地也执行 nomodule 脚本。

最稳妥的缓解方式是加一层运行时检测，在 legacy-bundle.js 开头判断是否已存在模块环境：

if (typeof module !== 'undefined' && module !== null) {
  // 已有模块执行上下文，直接退出
  exit;
}
// 后续 legacy 逻辑

这个判断比 UA 更可靠，也避开 Safari 10.1 的双执行陷阱。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索前端的入门与实战技巧！