dynamically polyfill features for a script

dynamically polyfill features for a script

Outro código-fonte

v0.0.9

Baixar

Recursos dinamicamente de poli -fil para um script

Um pequeno script que permite apenas polirfilizar um recurso quando absolutamente necessário - sem solicitações desperdiçadas em navegadores com suporte nativo! ?

Este script é ~ 4,2kb UN minificado (121 linhas) (1,04 kb de unificado e gziped) , ~ 8,37kb UN minificado com comentários embutidos (121 linhas) (2,12kb Unificado e Gzipped) , ou ~ 1,9kb minificado (1 linha) (743b minificados e gzipped) , assim como ~ Fairly Light. ?

Começando

Consulte a implantação para obter notas sobre como implantar o projeto em um sistema ao vivo.

Pré -requisitos

Certifique -se de saber em quais recursos seu script depende e poli -os que não são suportados nativamente nos navegadores que você suporta (você pode verificar https://caniuse.com/).

Implantação

Carregando via NPM

Execute npm i dynamic-polyfiller
Importar no seu aplicativo (exemplo abaixo para reação):

 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();'
) ;

Carregando localmente (recomendado como é mais fácil):

Copie o conteúdo de dinâmicopolfill.js
Cole -o em seus arquivos JS existentes

Adicione uma nova linha depois dela e ligue para dynamicPolyfill(); Nota: sensível à caixa

Exemplo:

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

Adicione um atributo onLoad à tag chamando a função dynamicPolyfill() e passando seus parâmetros
1. Nota: O primeiro parâmetro é o recurso Polyfills que você deseja passar. Isso é esperado como uma matriz.
2. Nota: O segundo paramter é o URL do script que você deseja usar. Isso é esperado como uma string ou uma array , mas pode estar em branco ( '' ) ou null se você não estiver carregando um script de terceiros.
3. Nota: O terceiro parâmetro é a função que você executaria assim que o script estiver carregado. Isso é esperado como uma string ou uma array .
4. NOTA: O 4º parâmetro agora foi obsoleto.

Carregando da CDN (menos recomendado):

Adicione uma tag <script></script> vinculação a este script

Exemplo:

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

Adicione um atributo onLoad à tag chamando a função dynamicPolyfill() e passando seus parâmetros
1. Nota: O primeiro parâmetro é o recurso Polyfills que você deseja passar. Isso é esperado como uma matriz.
2. Nota: O segundo paramter é o URL do script que você deseja usar. Isso é esperado como uma string ou uma array , mas pode estar em branco ( '' ) ou null se você não estiver carregando um script de terceiros.
3. Nota: O terceiro parâmetro é a função que você executaria assim que o script estiver carregado. Isso é esperado como uma string ou uma array .
4. NOTA: O 4º parâmetro agora foi obsoleto.

Nota: O carregamento de um CDN ainda resultaria em uma solicitação potencialmente desperdiçada?

Método de exemplo de uso

Local

Variáveis de string

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

Variáveis 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: Você precisa garantir que, antes de chamar a função dynamicPolyfill() , o próprio script real carregou. Se você for hospedado no script (em vez de chamar uma CDN), inclua primeiro o código do script e ligue para a função. Você pode fazer isso da mesma maneira que acima, mas substitua o URL do CDN pelo caminho para o seu próprio arquivo JS, se não quiser chamá -lo do mesmo arquivo.

Variáveis de string:

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

Variáveis 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>