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

Question

背景

JavaScript ES6 规范支持模块导入，即ES6 模块。

静态导入使用起来很明显，并且已经有很好的浏览器支持，但动态导入仍然落后。
因此，您的代码很可能使用静态模块（当这些模块不受支持时，代码甚至不会执行），但浏览器可能会错过对动态导入的支持。因此，检测动态加载是否有效（在尝试实际加载代码之前）可能很有用。而作为浏览器检测是令人难以接受的，当然我想使用功能检测。

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

问题

现在，当动态模块被导入时，import('/modules/my-module.js')显然会尝试只检测函数是否存在，如下所示：

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

我想，对于每个（？）其他函数，这都可以工作，但问题似乎是：import分别是ECMAScript 中的 保留关键字，现在显然也用于指示静态导入，它不是真正的功能。正如 MDN 所说，它是“类函数”。

尝试

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

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

编辑：正如我看到的一些答案，请注意，该解决方案当然应该尽可能普遍可用，ieeg CSP可能会阻止使用evalPWA ，并且在 PWA 中，您不应假设您始终在线，因此只需尝试一些随意的请求文件可能会导致错误的结果。

Answer 1

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

该函数hasDynamicImport返回 a 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'))

• 优势- 无误报
• 缺点- 使用 eval

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

Answer 2

我自己的解决方案，它需要 1 个额外的请求，但没有全局变量，没有 eval，并且严格符合 CSP：

进入你的 HTML

<script type="module">
import('./isDynamic.js')
</script>
<script src="/main.js" type="module"></script>

isDynamic.js

let value

export const then = () => (value = value === Boolean(value))

main.js

import { then } from './isDynamic.js'

console.log(then())

选择

不需要额外的请求，也不需要 eval/globals（当然），只需要 DataURI 支持：

<script type="module">
import('data:text/javascript,let value;export const then = () => (value = value === Boolean(value))')
</script>
<script src="/main.js" type="module"></script>

import { then } from 'data:text/javascript,let value;export const then = () => (value = value === Boolean(value))'

console.log(then())

怎么运行的？非常简单，因为它是相同的 URL，被调用两次，所以它只调用动态模块一次......并且由于动态导入解析了 thenable 对象，因此它then()单独解析了调用。

{ then }感谢 Guy Bedford 对于出口的想法