Wie kann ich das Regenerator-Runtime-Polyfill bedingt verwenden?

Question

This article hat mich dazu inspiriert, die Polyfills, die ich für meine React-App geladen habe, extern zu stellen und sie nur für Browser zu laden, die sie benötigen. Ein einfacher Test:

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

Wird dann festzustellen, ob polyfills sollte geladen werden:

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. 
} 

Aber ich bin mit Generatoren in meinem Code und das scheint ein bisschen ein kanten Fall zu sein. Von was ich verstehe, Babel transformiert Generatoren (https://babeljs.io/docs/plugins/transform-regenerator/) und der transpiled Code wird dann auch regeneratorRuntime definiert werden müssen (mit this package).

Also meine App schlägt fehl, weil regeneratorRuntime nicht definiert ist, wenn App importiert wird (die Code enthält, der Generatoren verwendet). So sind meine polyfills zu spät:

// 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); 
} 

Ich weiß, ich könnte dieses Problem beheben, indem Regenerator am Anfang importieren, aber die Absicht ist hier polyfills auszulagern und sie davon abhängig zu machen.

Also meine Frage ist; Wie kann ich weiter Generatoren verwenden, aber meine enthaltenen Polyfills immer noch unter loadScript halten?

Answer 1

Sie können die Eigenschaft überprüfen mit:

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

Es gibt npm Paket polyfill-io-Feature-Erkennung, die genau tut das gleiche, einen Blick auf diese Lösung zu sehen, wie sie die Feature-Erkennung handhaben: https://github.com/jquintozamora/polyfill-io-feature-detection