dynamically polyfill features for a script

Dinámicamente las características de polyfill para un script

Un pequeño script que solo le permite pololear una función cuando es absolutamente necesario, ¡no hay solicitudes desperdiciadas en los navegadores que tienen soporte nativo! ?

Este script es ~ 4.2kb un minificado (121 líneas) (1.04kb un minificado y gzipped) , ~ 8.37kb no minificado con comentarios en línea (121 líneas) (2.12kb un minificado y gzipped) , o ~ 1.9kb minificado (1 línea) (743b minificado y GZippip) , por lo que es bastante ligero. ?

Empezando

Consulte la implementación de notas sobre cómo implementar el proyecto en un sistema en vivo.

Requisitos previos

Asegúrese de saber en qué características depende de su guión y suplique aquellos que no son compatibles de forma nativa en los navegadores que admite (puede consultar https://caniuse.com/).

Despliegue

Carga a través de NPM

1. Ejecutar npm i dynamic-polyfiller
2. Importar en su aplicación (ejemplo a continuación para 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();'
) ;

Carga localmente (recomendado como es más fácil):

1. Copiar el contenido de DynamicPolyFill.js
2. Pételo en sus archivos JS existentes
3. Agregue una nueva línea después y llame dynamicPolyfill(); Nota: Case sensible a
   1. Ejemplo:

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

4. Agregue un atributo onLoad a la etiqueta que llama a la función dynamicPolyfill() y pase sus parámetros
   1. Nota: El primer parámetro son los polyfills de características que desea pasar. Esto se espera como una matriz.
   2. Nota: El segundo parámetro es la URL del script que desea usar. Esto se espera como una string o una array , pero puede estar en blanco ( '' ) o null si no está cargando un script de terceros.
   3. Nota: El tercer parámetro es la función que ejecutaría una vez que el script se haya cargado. Esto se espera como una string o una array .
   4. Nota: El 4to parámetro ahora se ha desactivado.

Carga de CDN (menos recomendado):

1. Agregue un <script></script> vinculación de la etiqueta a este script
   1. Ejemplo:

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

2. Agregue un atributo onLoad a la etiqueta que llama a la función dynamicPolyfill() y pase sus parámetros
   1. Nota: El primer parámetro son los polyfills de características que desea pasar. Esto se espera como una matriz.
   2. Nota: El segundo parámetro es la URL del script que desea usar. Esto se espera como una string o una array , pero puede estar en blanco ( '' ) o null si no está cargando un script de terceros.
   3. Nota: El tercer parámetro es la función que ejecutaría una vez que el script se haya cargado. Esto se espera como una string o una array .
   4. Nota: El 4to parámetro ahora se ha desactivado.

Nota: ¿La carga de un CDN aún daría como resultado una solicitud potencialmente desperdiciada?

Método de uso de ejemplo

Local

Variables de cadena

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

Variables de matriz

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

CDN

Nota: debe asegurarse de que antes de llamar a la función dynamicPolyfill() que el script real ha cargado. Si va a alojar el script usted mismo (en lugar de llamar a un CDN), asegúrese de incluir primero el código de script, luego llame a la función. Puede hacer esto de la misma manera que se indicó, pero reemplace la URL CDN con la ruta a su propio archivo JS, si no lo va a llamar desde el mismo archivo.

Variables de cadena:

 <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 de matriz:

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

Construido con

• Vanilla JavaScript - ¡No hay dependencias de marco en absoluto!
• Polyfill.io - ¡Para los polyfills reales!

Versiones

Para las versiones disponibles, consulte el historial de lanzamiento de Repo. ¡Sin embargo, recomendaría seguir con el "último lanzamiento"!

Autores

• Will Stocks - Trabajo inicial - Willstocks -Tech

¡Vea también la lista de contribuyentes que han participado en esta pequeña pepita!

Que contribuye

Lea Contriping.MD para obtener detalles sobre el código de conducta y el proceso para enviar solicitudes de extracción.

Licencia

Este proyecto tiene licencia bajo la licencia MIT: consulte el archivo de licencia.md para más detalles

Expresiones de gratitud

• ¡Purplebooth para esta increíble plantilla de lectura!
• ¡Polyfill.io para el increíble servicio de polyfill!