title: How can I use the regenerator-runtime polyfill conditionally?
body: <p><a href="https://philipwalton.com/articles/loading-polyfills-only-when-needed/" rel="nofollow noreferrer">This article</a> inspired me to externalise the polyfills that I'm loading for my React app and only load them for browsers that need them. A simple test:</p>
  
  <pre><code>function browserSupportsAllFeatures() {
    return window.Promise &amp;&amp; window.fetch &amp;&amp; window.regeneratorRuntime
  }
  </code></pre>
  
  <p>Will then determine if polyfills should be loaded:</p>
  
  <pre><code>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.
  }
  </code></pre>
  
  <p>However, I'm using generators in my code and that seems to be a bit of an edge-case. From what I understand babel transforms generators (<a href="https://babeljs.io/docs/plugins/transform-regenerator/" rel="nofollow noreferrer">https://babeljs.io/docs/plugins/transform-regenerator/</a>) and the transpiled code will then also need <code>regeneratorRuntime</code> to be defined (with <a href="https://github.com/facebook/regenerator/tree/master/packages/regenerator-runtime" rel="nofollow noreferrer">this package</a>).</p>
  
  <p>So my app fails because <code>regeneratorRuntime</code> is not defined when <code>App</code> is imported (which contains code that uses generators). So my polyfills are too late:</p>
  
  <pre><code>// import dependencies
  import React from 'react'
  import { render } from 'react-dom'
  import { App } from './components/app'
  
  const renderApp = () =&gt; {
    render(&lt;App /&gt;, document.getElementById('app'))
  }
  
  function browserSupportsAllFeatures() {
    return window.Promise &amp;&amp; window.fetch &amp;&amp; window.regeneratorRuntime
  }
  
  if (browserSupportsAllFeatures()) {
    renderApp()
  } else {
    loadScript('/path/to/polyfills.js', renderApp);
  }
  </code></pre>
  
  <p>I know I could fix this by importing regenerator at the the top, but the intention here is to externalise polyfills and make them conditional.</p>
  
  <p>So my question is; how can I keep using generators, but still keep my polyfills contained to the <code>loadScript</code> call?</p>