dynamically polyfill features for a script

Fitur Polyfill Dinamis untuk Skrip

Sebuah skrip kecil yang memungkinkan Anda untuk hanya polyfill fitur bila benar -benar diperlukan - tidak ada permintaan yang terbuang pada browser yang memiliki dukungan asli! ??

Script ini ~ 4.2kb un minified (121 baris) (1.04kb un minified and gzipped) , ~ 8.37kb tidak diminifikasi dengan komentar inline (121 baris) (2.12kb un minified dan gzipped) , atau ~ 1.9KB Minified (1 baris) (743b Minified and Gzipped) , demikian paongnya . ?

Memulai

Lihat Penempatan untuk Catatan tentang Cara Menyebarkan Proyek pada Sistem Langsung.

Prasyarat

Pastikan Anda tahu fitur apa yang fitur skrip Anda bergantung pada dan polyfill yang tidak didukung secara asli di browser yang Anda dukung (Anda dapat memeriksa https://caniuse.com/).

Penyebaran

Memuat melalui NPM

1. Jalankan npm i dynamic-polyfiller
2. Impor di aplikasi Anda (contoh di bawah ini untuk 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();'
) ;

Memuat secara lokal (direkomendasikan seperti yang paling mudah):

1. Salin konten DynamicPolyfill.js
2. Tempel ke dalam file JS Anda yang ada
3. Tambahkan baris baru setelahnya dan hubungi dynamicPolyfill(); CATATAN: Sensitif case
   1. Contoh:

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

4. Tambahkan atribut onLoad ke tag yang memanggil fungsi dynamicPolyfill() dan lulus parameter Anda
   1. Catatan: Parameter pertama adalah fitur polyfill yang ingin Anda lewati. Ini diharapkan sebagai array.
   2. Catatan: Paramter kedua adalah URL dari skrip yang ingin Anda gunakan. Ini diharapkan sebagai string atau array , tetapi bisa kosong ( '' ) atau null jika Anda tidak memuat skrip pihak ketiga.
   3. Catatan: Parameter ketiga adalah fungsi yang akan Anda jalankan setelah skrip dimuat. Ini diharapkan sebagai string atau array .
   4. CATATAN: Parameter ke -4 sekarang sudah usang.

Memuat dari CDN (kurang disarankan):

1. Tambahkan tag <script></script> yang menghubungkan ke skrip ini
   1. Contoh:

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

2. Tambahkan atribut onLoad ke tag yang memanggil fungsi dynamicPolyfill() dan lulus parameter Anda
   1. Catatan: Parameter pertama adalah fitur polyfill yang ingin Anda lewati. Ini diharapkan sebagai array.
   2. Catatan: Paramter kedua adalah URL dari skrip yang ingin Anda gunakan. Ini diharapkan sebagai string atau array , tetapi bisa kosong ( '' ) atau null jika Anda tidak memuat skrip pihak ketiga.
   3. Catatan: Parameter ketiga adalah fungsi yang akan Anda jalankan setelah skrip dimuat. Ini diharapkan sebagai string atau array .
   4. CATATAN: Parameter ke -4 sekarang sudah usang.

Catatan: Memuat dari CDN masih akan menghasilkan permintaan yang berpotensi terbuang?

Contoh metode penggunaan

Lokal

Variabel string

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

Variabel array

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

CDN

Catatan: Anda perlu memastikan bahwa sebelum Anda memanggil fungsi dynamicPolyfill() yang telah dimuat oleh skrip aktual. Jika Anda akan meng -host skrip sendiri (daripada memanggil CDN), pastikan Anda menyertakan kode skrip terlebih dahulu, maka hubungi fungsinya. Anda dapat melakukan ini dengan cara yang sama seperti di atas, tetapi ganti URL CDN dengan jalur ke file JS Anda sendiri, jika Anda tidak akan menyebutnya dari file yang sama.

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

Variabel array:

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

Dibangun dengan

• Vanilla Javascript - Tidak ada dependensi kerangka kerja apa pun!
• POLYFILL.IO - Untuk polyfill yang sebenarnya!

Versi

Untuk versi yang tersedia, lihat riwayat rilis repo. Saya akan merekomendasikan tetap pada "rilis terbaru"!

Penulis

• Will Stocks - Pekerjaan Awal - Willstocks -Tech

Lihat juga daftar kontributor yang telah berpartisipasi dalam nugget kecil ini!

Berkontribusi

Harap baca Contributing.md untuk perincian tentang kode perilaku, dan proses untuk mengirimkan permintaan tarik.

Lisensi

Proyek ini dilisensikan di bawah lisensi MIT - lihat file lisensi.md untuk detailnya

Ucapan Terima Kasih

• PURPLEBOOTH untuk template readme yang luar biasa ini!
• Polyfill.io untuk layanan polyfill yang luar biasa!