能否使用Modernizr检测ES6模块支持？相关检测属性咨询

嘿，你完全没遗漏什么——Modernizr默认确实没有内置检测ES6模块的预设属性，这也是很多开发者会碰到的小困惑。

为什么找不到相关属性？ #

Modernizr的核心预设检测主要覆盖了早期的前端特性，而ES6模块作为相对后期普及的特性，并没有被加入到默认的检测集合里，所以查文档找不到是正常的。

能不能通过其他属性推断？ #

答案是不建议。ES6模块的支持是独立的浏览器特性，和其他ES6语法（比如箭头函数、let/const）的支持并不绑定——有些浏览器可能已经支持大部分ES6语法，但依然不支持模块加载。所以靠其他ES6相关的检测结果来推断模块支持，很容易出错。

解决方案：自定义Modernizr检测 #

好在Modernizr支持添加自定义检测，你可以自己写一段逻辑来判断浏览器是否支持ES6模块。这里有个实用的实现：

Modernizr.addTest('es6modules', function() {
  let isSupported = false;
  const testScript = document.createElement('script');
  
  // 设置脚本类型为module
  testScript.type = 'module';
  // 脚本内容：如果支持模块，就给window添加一个标记
  testScript.textContent = 'window._es6ModuleTest = true;';
  
  // 加载成功：说明支持模块
  testScript.onload = function() {
    isSupported = window._es6ModuleTest === true;
    // 清理临时变量
    delete window._es6ModuleTest;
  };
  
  // 加载失败：说明不支持模块
  testScript.onerror = function() {
    isSupported = false;
  };
  
  // 插入脚本并立即移除（不影响DOM）
  document.head.appendChild(testScript);
  document.head.removeChild(testScript);
  
  return isSupported;
});

这段代码的逻辑很简单：动态创建一个type="module"的脚本，如果浏览器支持ES6模块，这个脚本会正常执行并给window添加标记；如果不支持，脚本会触发onerror事件。

之后你就可以像用Modernizr的其他检测属性一样，通过Modernizr.es6modules来判断结果——返回true就是支持，false就是不支持。

内容的提问来源于stack exchange，提问作者funky-future