dynamically polyfill features for a script

스크립트의 동적 폴리 필 기능

필요한 경우 기능 만 폴리 플릴을 할 수있는 작은 스크립트 - 기본 지원이있는 브라우저에 낭비 된 요청이 없습니다! ??

이 스크립트는 ~ 4.2KB UN 미니링 (121 라인) (1.04KB UN 미니 화 및 GZIPPER) , ~ 8.37KB UN은 인라인 댓글 (121 라인) (2.12KB UN 미수 및 GZIPPED) 또는 ~ 1.9KB 미니딩 (743B 미니화 및 GZIPPES) 으로 미니딩되므로 공상적으로 가볍습니다. ?

시작하기

라이브 시스템에 프로젝트를 배포하는 방법에 대한 메모는 배포를 참조하십시오.

전제 조건

스크립트가 의존하는 기능을 알고 지원하는 브라우저에서 기본적으로 지원되지 않는 기능을 알고 있는지 확인하십시오 (https://caniuse.com/을 확인할 수 있음).

전개

NPM을 통해 로딩

1. npm i dynamic-polyfiller 실행하십시오
2. 앱에서 가져 오기 (반응의 경우 아래의 예) :

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

로컬로드 (가장 쉬운만큼 권장) :

1. DynamicPolyFill.js의 내용을 복사하십시오
2. 기존 JS 파일에 붙여 넣으십시오.
3. 새 선을 추가하고 dynamicPolyfill(); 참고 : 사례에 민감합니다
   1. 예:

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

4. dynamicPolyfill() 함수를 호출하고 매개 변수를 전달하는 태그에 onLoad 속성 추가
   1. 참고 : 첫 번째 매개 변수는 통과하려는 기능 폴리 플릴입니다. 이것은 배열로 예상됩니다.
   2. 참고 : 두 번째 매개 변수는 사용하려는 스크립트의 URL입니다. 이것은 string 또는 array 로 예상되지만 타사 스크립트를로드하지 않으면 비워거나 ( '' ) 또는 null 일 수 있습니다.
   3. 참고 : 세 번째 매개 변수는 스크립트가로드되면 실행할 기능입니다. 이것은 string 또는 array 로 예상됩니다.
   4. 참고 : 네 번째 매개 변수는 이제 더 이상 사용되지 않았습니다.

CDN에서로드 (권장하지 않음) :

1. 이 스크립트에 <script></script> 태그 링크를 추가하십시오
   1. 예:

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

2. dynamicPolyfill() 함수를 호출하고 매개 변수를 전달하는 태그에 onLoad 속성 추가
   1. 참고 : 첫 번째 매개 변수는 통과하려는 기능 폴리 플릴입니다. 이것은 배열로 예상됩니다.
   2. 참고 : 두 번째 매개 변수는 사용하려는 스크립트의 URL입니다. 이것은 string 또는 array 로 예상되지만 타사 스크립트를로드하지 않으면 비워거나 ( '' ) 또는 null 일 수 있습니다.
   3. 참고 : 세 번째 매개 변수는 스크립트가로드되면 실행할 기능입니다. 이것은 string 또는 array 로 예상됩니다.
   4. 참고 : 네 번째 매개 변수는 이제 더 이상 사용되지 않았습니다.

참고 : CDN에서로드하면 여전히 잠재적으로 낭비되는 요청이 발생합니까?

예제 사용 방법

현지의

문자열 변수

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

배열 변수

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

cdn

참고 : 실제 스크립트 자체가로드 된 dynamicPolyfill() 함수를 호출하기 전에 확인해야합니다. CDN을 호출하는 대신 스크립트를 직접 호스팅하려면 스크립트 코드를 먼저 포함시켜 기능을 호출하십시오. 위와 같은 방식으로이를 수행 할 수 있지만 동일한 파일에서 호출하지 않으려면 CDN URL을 자신의 JS 파일로 바꾸십시오.

문자열 변수 :

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

배열 변수 :

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

구축

• 바닐라 JavaScript- 프레임 워크 의존성 없음!
• polyfill.io- 실제 폴리 필의 경우!

버전 작성

사용 가능한 버전은 Repo Release 기록을 확인하십시오. 그래도 "최신 릴리스"를 고수하는 것이 좋습니다!

저자

• 윌 주식 - 초기 작업 - Willstocks -Tech

이 작은 너겟에 참여한 기고자 목록도 참조하십시오!

기여

행동 강령에 대한 자세한 내용과 풀 요청을 제출하는 프로세스는 Contributing.md를 읽으십시오.

특허

이 프로젝트는 MIT 라이센스에 따라 라이센스가 부여됩니다. 자세한 내용은 License.md 파일을 참조하십시오.

감사의 말

• 이 멋진 readme 템플릿을위한 보라색 부스!
• 멋진 Polyfill 서비스를위한 Polyfill.io!