javascript - 如何特征检测浏览器是否支持动态 ES6 模块加载？

Question

背景

JavaScript ES6 规范支持 module imports又名 ES6 modules .

静态导入使用起来非常明显，并且已经有 quite a good browser support , 但动态导入是 still lacking behind .
因此，您的代码很有可能使用静态模块(当不支持这些模块时，代码甚至不会执行)，但浏览器可能会错过对动态导入的支持。因此，检测动态加载是否有效(在尝试实际加载代码之前)可能很有用。和as browser detection is frowned upon ，当然我想使用特征检测。

用例可能是显示错误，回退到其他一些数据/默认/加载算法，为开发人员提供模块中动态加载(数据，例如惰性模式样式)的优势，同时允许回退以传递数据直接等。基本上，所有可以使用特征检测的常用用例。

问题

现在，由于动态模块是通过 import('/modules/my-module.js') 导入的显然，人们会尝试检测该功能是否存在，如下所示:

// this code does NOT work
if (import) {
    console.log("dynamic import supported")
}

我想，对于每个(？)其他功能，这会起作用，但问题似乎是:As import分别是 a reserved keyword in ECMAScript ，现在显然也用于表示静态导入，它不是真正的功能。正如 MDN 所说，它是“类似函数的”。

尝试
import()导致语法错误，所以这不是真正可用的，import("")导致 Promise 被拒绝，这可能很有用，但看起来真的很hackish/像一个解决方法。此外，它需要一个异步上下文(await 等)仅用于特征检测，这不是很好。typeeof import也直接失败，导致语法错误，因为关键字 ("unexpected token: keyword 'import'")。

那么，可靠地检测浏览器是否支持动态 ES6 模块的最佳方法是什么？

编辑:当我看到一些答案时，请注意该解决方案当然应该尽可能普遍可用，即例如CSPs可能会阻止the use of eval 在 PWA 中，您不应假设您始终在线，因此仅尝试请求一些任意文件可能会导致错误结果。

Answer 1

以下代码检测动态导入支持而没有误报。该函数实际上从数据 uri 加载了一个有效的模块(这样它即使在离线时也能工作)。

函数hasDynamicImport返回 Promise ，因此它需要原生或 polyfill Promise 支持。另一方面，动态导入返回一个 Promise。因此，如果不支持 Promise，则检查动态导入支持是没有意义的。

function hasDynamicImport() {
  try {
    return new Function("return import('data:text/javascript;base64,Cg==').then(r => true)")();
  } catch(e) {
    return Promise.resolve(false);
  }
}

hasDynamicImport()
  .then((support) => console.log('Dynamic import is ' + (support ? '' : 'not ') + 'supported'))

优势 - 没有误报

缺点 - 使用评估

这已经在最新的 Chrome、Chrome 62 和 IE 11(带有 polyfill Promise)上进行了测试。