如何在HTML网页中给script标签添加nomodule属性进行优雅降级-html教程-PHP中文网

nomodule必须与type="module"成对使用，单独存在无效；现代浏览器执行module脚本并跳过nomodule，旧浏览器则执行nomodule脚本；需确保legacy-bundle.js为es5兼容iife/umd格式，并手动引入polyfill；safari 10.1存在双执行问题，须用运行时检测规避。

如何在html网页中给script标签添加nomodule属性进行优雅降级

nomodule 必须和 type="module" 成对出现，单独写没效果

只写 <script nomodule src="legacy.js"></script> 会导致现代浏览器完全不加载它（连网络请求都没有），旧浏览器又可能因缺少兜底脚本而白屏。IE11 甚至会静默忽略整行标签——控制台看不到报错，但脚本根本没执行。

真正起作用的结构是两行并存：

<script type="module" src="app.mjs"></script><script nomodule src="legacy-bundle.js"></script>

现代浏览器（Chrome 61+、Firefox 60+、Safari 11+）执行 app.mjs，跳过 legacy-bundle.js
旧浏览器（IE11、Android 4.4 WebView）不认识 type="module"，直接跳过第一行；但会加载并执行第二行
顺序无关，但推荐模块优先，符合直觉且便于维护

legacy-bundle.js 必须是真正 ES5 兼容的 IIFE/UMD 格式

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

语法层面：含 const、let、=>、${}、class → 直接 SyntaxError
API 层面：调用 fetch()、Promise、Array.from()、Object.assign() → ReferenceError 或静默失败
DOM 层面：用 element.classList.add()（IE9–）、querySelector()（IE7–）、addEventListener()（IE8–）→ 报错或无响应

构建时必须显式设 targets: { ie: "11" }，不能依赖 Babel 默认 preset；core-js/stable 需手动引入，且 polyfill 必须在所有业务代码之前执行；输出格式只能是 IIFE 或 UMD，严禁含 import/export，禁用 dynamic import()。

Safari 10.1 会双执行，需要运行时规避

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

Wechat HTML Publisher

直接上传HTML富文本到微信公众号草稿箱。支持完整的HTML格式,无需Markdown转换。

下载

最稳妥的缓解方式是加一层运行时检测，只在“半吊子”浏览器中注入 fallback：

if (!('noModule' in document.createElement('script'))) {
  const s = document.createElement('script');
  s.src = 'legacy-bundle.js';
  document.head.appendChild(s);
}

这段逻辑本身要放在 type="module" 脚本之前，且需确保它自身是纯 ES5、无依赖的内联脚本。