javascript - 如何有条件地使用Regenerator-Runtime Polyfill？

This article启发了我将我正在为我的React应用程序加载的polyfill外部化，并且仅将它们加载到需要它们的浏览器中。一个简单的测试：

function browserSupportsAllFeatures() {
  return window.Promise && window.fetch && window.regeneratorRuntime
}

然后将确定是否应加载polyfills：

if (browserSupportsAllFeatures()) {
  // Browsers that support all features run `main()` immediately.
  main()
} else {
  // All other browsers loads polyfills and then run `main()`.
  loadScript('/path/to/polyfills.js', main)
}

function main(err) {
  // Initiate all other code paths.
  // If there's an error loading the polyfills, handle that
  // case gracefully and track that the error occurred.
}

但是，我在代码中使用了生成器，这似乎有些极端。根据我的理解，babel变换生成器（https://babeljs.io/docs/plugins/transform-regenerator/）和转译的代码也将需要定义regeneratorRuntime（使用this package）。

所以我的应用失败了，因为导入regeneratorRuntime时未定义App（其中包含使用生成器的代码）。所以我的polyfills为时已晚

// import dependencies
import React from 'react'
import { render } from 'react-dom'
import { App } from './components/app'

const renderApp = () => {
  render(<App />, document.getElementById('app'))
}

function browserSupportsAllFeatures() {
  return window.Promise && window.fetch && window.regeneratorRuntime
}

if (browserSupportsAllFeatures()) {
  renderApp()
} else {
  loadScript('/path/to/polyfills.js', renderApp);
}

我知道我可以通过在顶部导入再生器来解决此问题，但是这里的目的是外部化polyfill并使其成为有条件的。

所以我的问题是；如何继续使用生成器，但仍将Polyfill包含在loadScript调用中？

最佳答案

您可以使用以下方法检查属性：

if (window.hasOwnProperty("regeneratorRuntime")) ...

npm软件包polyfill-io-feature-detection的功能完全相同，请查看此解决方案以了解其如何处理特征检测：
https://github.com/jquintozamora/polyfill-io-feature-detection

关于javascript - 如何有条件地使用Regenerator-Runtime Polyfill？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/42739695/