HTML中nomodule属性使用教程

在HTML中，`nomodule`属性并非为旧浏览器“开启”兼容模式的开关，而是向支持ES模块的现代浏览器发出“请忽略此脚本”的明确指令；旧浏览器因不识别该属性而照常执行`

nomodule 属性只对 ——这毫无意义，现代浏览器既识别 type="module" 又看到 nomodule，会跳过；但旧浏览器不认识 type="module"，又忽略 nomodule，结果谁都不执行。

正确结构如下：

<script type="module" src="app.mjs"></script>
<script nomodule src="app.fallback.js"></script>

• app.mjs 可用 import、export、async/await 等现代特性
• app.fallback.js 必须是 IIFE 或全局变量形式，用 ES5 语法打包（例如通过 rollup --format iife --output.dir dist）
• 两个文件输出的 DOM 效果应一致，比如都调用 initSearchBox()，但实现方式不同

注意 Safari 10.1 的怪异行为：nomodule 被误判为 module

Safari 10.1（macOS 10.12.4 / iOS 10.3）存在一个已知 bug：它识别 type="module"，但会错误地也执行带 nomodule 的脚本。结果就是新旧两套逻辑都被触发，可能造成重复初始化或冲突。

缓解方案是加一个运行时检测：

<script nomodule>
  if (!('noModule' in document.createElement('script'))) {
    document.write('<script src="app.fallback.js"></script>');
  }
</script>

• 利用 noModule 属性是否存在来判断浏览器是否真正支持 nomodule 语义
• 只有 Safari 10.1 这类“半吊子”浏览器会进入 document.write 分支
• 现代浏览器和真正老旧的 IE 都不会执行这段内联脚本里的 document.write

构建流程中容易漏掉的兼容性检查点

很多人以为只要写了 nomodule 就万事大吉，结果上线后旧用户白屏。问题往往出在构建环节：

• app.fallback.js 没有经过 Babel 处理（比如漏了 @babel/preset-env 配置 targets: { ie: '11' }）
• 打包工具把 process.env.NODE_ENV 注入到了 fallback 脚本里，导致 IE11 报 ReferenceError: process is not defined
• 用了 fetch 或 Promise 但没配 polyfill（nomodule 脚本里必须自己 import 或内联 polyfill）
• 路径写错，比如 src="js/app.fallback.js" 实际文件在 /static/js/ 下，404 导致静默失败

最稳妥的做法：本地用 IE11 或 Edge 18 打开 HTML，打开开发者工具的 Network 面板，确认 nomodule 脚本成功加载且控制台无语法错误——光看页面渲染正常不够，得看 JS 是否真跑起来了。

今天带大家了解了的相关知识，希望对你有所帮助；关于文章的技术知识我们会一点点深入介绍，欢迎大家关注golang学习网公众号，一起学习编程~