dynamically polyfill features for a script

Fonctions de polyfill dynamiquement pour un script

Un petit script qui vous permet de uniquement en polyfill une fonctionnalité lorsque cela est absolument nécessaire - pas de demandes gaspillées sur les navigateurs qui ont une prise en charge native! ??

Ce script est ~ 4.2KB UN Minifié (121 lignes) (1,04KB UN MIFIED et GZIPED) , ~ 8,37KB UN Minifié avec des commentaires en ligne (121 lignes) (2.12KB UN Minifié et gzipip) , ou ~ 1,9 KB Minifié (1 ligne) (743B Minifié et gzipped) , donc il est assez léger. ?

Commencer

Voir le déploiement pour des notes sur la façon de déployer le projet sur un système en direct.

Condition préalable

Assurez-vous de savoir sur les fonctionnalités de votre script sur et les polyfills ceux qui ne sont pas nativement pris en charge sur les navigateurs que vous prenez en charge (vous pouvez vérifier https://caniuse.com/).

Déploiement

Chargement via NPM

1. Exécuter npm i dynamic-polyfiller
2. Importer dans votre application (exemple ci-dessous pour React):

 import React from 'react' ;  
import { render } from 'react-dom' ;  

//The import below is the bit you need!
import dynamicPolyfill from 'dynamic-polyfiller' ;

dynamicPolyfill (
  [ "IntersectionObserver" , "Object.assign" ] ,
  'https://cdn.jsdelivr.net/npm/[email protected]/dist/quicklink.umd.js' ,
  'quicklink();'
) ;

Chargement localement (recommandé comme c'est le plus facile):

1. Copiez le contenu de DynamicPolyFill.js
2. Collez-le dans votre (s) fichier JS existant
3. Ajoutez une nouvelle ligne après et appelez dynamicPolyfill(); Remarque: sensible à la casse
   1. Exemple:

    dynamicPolyfill( ["IntersectionObserver", "Object.assign"], 'https://cdn.jsdelivr.net/npm/[email protected]/dist/quicklink.umd.js', 'quicklink();' )
   

4. Ajoutez un attribut onLoad à la balise appelant la fonction dynamicPolyfill() et passant vos paramètres
   1. Remarque: Le premier paramètre est les polyfills de caractéristiques que vous souhaitez passer. Ceci est attendu en tant que tableau.
   2. Remarque: le deuxième paramètre est l'URL du script que vous souhaitez utiliser. Ceci est attendu comme une string ou un array , mais peut être vide ( '' ) ou null si vous ne chargez pas de script tiers.
   3. Remarque: le troisième paramètre est la fonction que vous exécuteriez une fois le script chargé. Ceci est attendu en tant que string ou array .
   4. Remarque: le 4ème paramètre a maintenant été obsolète.

Chargement à partir de CDN (moins recommandé):

1. Ajouter une balise <script></script> liant à ce script
   1. Exemple:

    <script src='https://cdn.jsdelivr.net/gh/willstocks-tech/dynamically-polyfill-features-for-a-script@master/dynamicpolyfill.min.js'>
   </script>
   

2. Ajoutez un attribut onLoad à la balise appelant la fonction dynamicPolyfill() et passant vos paramètres
   1. Remarque: Le premier paramètre est les polyfills de caractéristiques que vous souhaitez passer. Ceci est attendu en tant que tableau.
   2. Remarque: le deuxième paramètre est l'URL du script que vous souhaitez utiliser. Ceci est attendu comme une string ou un array , mais peut être vide ( '' ) ou null si vous ne chargez pas de script tiers.
   3. Remarque: le troisième paramètre est la fonction que vous exécuteriez une fois le script chargé. Ceci est attendu en tant que string ou array .
   4. Remarque: le 4ème paramètre a maintenant été obsolète.

Remarque: le chargement à partir d'un CDN entraînerait toujours une demande potentiellement gaspillée?

Exemple de méthode d'utilisation

Locale

Variables de chaîne

 dynamicPolyfill( 'IntersectionObserver', 'https://cdn.jsdelivr.net/npm/[email protected]/dist/quicklink.umd.js', 'quicklink();' );

Variables de tableau

 dynamicPolyfill( ["IntersectionObserver", "Object.assign"], ['https://cdn.jsdelivr.net/npm/[email protected]/dist/quicklink.umd.js', 'https://other.cdn.net/script.js'], ['quicklink();', 'otherFunction();'] );

Monnaie

Remarque: vous devez vous assurer qu'avant d'appeler la fonction dynamicPolyfill() que le script réel lui-même a chargé. Si vous allez héberger le script vous-même (plutôt que d'appeler un CDN), assurez-vous d'inclure d'abord le code de script, alors appelez la fonction. Vous pouvez le faire de la même manière que ci-dessus, mais remplacez l'URL CDN par le chemin d'accès à votre propre fichier JS, si vous ne l'appelez pas à partir du même fichier.

Variables de chaîne:

 <script
	src='https://cdn.jsdelivr.net/gh/willstocks-tech/dynamically-polyfill-features-for-a-script@master/dynamicpolyfill.min.js' 
	onload='dynamicPolyfill( ["IntersectionObserver", "Object.assign"], 'https://cdn.jsdelivr.net/npm/[email protected]/dist/quicklink.umd.js', 'quicklink();')'>
</script>

Variables du tableau:

 <script
	src='https://cdn.jsdelivr.net/gh/willstocks-tech/dynamically-polyfill-features-for-a-script@master/dynamicpolyfill.min.js' 
	onload='dynamicPolyfill(["IntersectionObserver", "Object.assign"], ['https://cdn.jsdelivr.net/npm/[email protected]/dist/quicklink.umd.js', 'https://other.cdn.net/script.js'], ['quicklink();', 'otherFunction();'])'>
</script>

Construit avec

• Vanilla JavaScript - Aucune dépendance à la framework quoi que ce soit!
• Polyfill.io - pour les polyfills réels!

Versioning

Pour les versions disponibles, consultez l'historique des versions du repo. Je recommanderais de rester à la "dernière version"!

Auteurs

• Will Stocks - Travail initial - Willstocks-Tech

Voir aussi la liste des contributeurs qui ont participé à cette petite pépite!

Contributif

Veuillez lire contribution.md pour plus de détails sur le code de conduite et le processus de soumission des demandes de traction.

Licence

Ce projet est sous licence en vertu de la licence MIT - voir le fichier licence.md pour plus de détails

Remerciements

• Purplebooth pour ce modèle de réadme génial!
• Polyfill.io pour le super service Polyfill!