unduh babel polyfills - unduh kode sumber babel polyfills

Polifill Babel

Seperangkat plugin Babel yang memungkinkan memasukkan polyfill berbeda dengan strategi berbeda ke dalam kode kompilasi Anda. Selain itu, repositori ini berisi paket yang membantu membuat penyedia untuk polyfill lainnya.

Repositori ini mengimplementasikan apa yang awalnya diusulkan di babel/babel#10008.

Jika Anda mencari beberapa contoh penyiapan cepat, atau hanya ingin melihat cara memigrasikan konfigurasi Anda, silakan periksa docs/migration.md .

Penggunaan

Paket utama Babel hanya mengubah sintaksis JavaScript : Anda juga perlu memuat polyfill, untuk membuat fungsi asli ( Array.prototype.flat ) atau objek bawaan ( Reflect ) berfungsi di browser lama.

Cara termudah untuk melakukannya adalah dengan langsung memuat polyfill menggunakan tag ">

 < script src =" https://unpkg.com/[email protected]/minified.js " >  script >

Namun, pendekatan sederhana ini berpotensi memasukkan banyak kode yang tidak perlu. Plugin Babel yang diterapkan di repositori ini secara otomatis memasukkan polyfill ke dalam kode Anda, sambil mencoba memuat hanya apa yang benar-benar diperlukan. Ini dilakukan berdasarkan target kompilasi Anda dan apa yang Anda gunakan dalam kode Anda.

Plugin ini (kami menyebutnya "penyedia polyfill") mendukung metode injeksi yang berbeda, agar lebih sesuai dengan kebutuhan Anda.

Misalnya, jika Anda ingin memasukkan impor ke polyfill es-shims dengan menambahkan fungsi yang hilang ke objek global, Anda dapat mengonfigurasi Babel seperti ini:

 Konfigurasi  Masukkan kode  Kode keluaran 
{
  "targets" : { "firefox" : 65 },
  "plugins" : [
    [ " polyfill-es-shims " , {
      "method" : " usage-global "
    }]
  ]
}
 Promise . allSettled ( [
  p1 ,
  p2
] ) . finally ( ( ) => {
  console . log ( "Done!" ) ;
} ) ;  {
  console.log("Done!");
});"> import "promise.prototype.finally/auto" ;
import "promise.allsettled/auto" ;

Promise . allSettled ( [
  p1 ,
  p2
] ) . finally ( ( ) => {
  console . log ( "Done!" ) ;
} ) ; Jika Anda ingin melihat contoh konfigurasi lainnya, Anda dapat memeriksa dokumen migrasi: docs/migration.md .
 Jika Anda tertarik membaca tentang semua opsi yang didukung oleh plugin ini, Anda dapat memeriksa dokumen penggunaan: docs/usage.md .
 Polyfill yang didukung
 poliisi  Pengaya  Metode
 core-js@2  babel-plugin-polyfill-corejs2  entry-global , usage-global dan usage-pure
 core-js@3  babel-plugin-polyfill-corejs3  entry-global , usage-global dan usage-pure
 es-shims  babel-plugin-polyfill-es-shims  usage-global dan usage-pure
 regenerator-runtime  babel-plugin-polyfill-regenerator  entry-global , usage-global dan usage-pure Kami mempertahankan dukungan untuk core-js dan es-shims , namun kami mendorong Anda untuk menerapkan penyedia untuk polyfill Anda sendiri, atau untuk favorit Anda! Salah satu tujuan kami adalah mendorong persaingan antar polyfill yang berbeda, untuk lebih menyeimbangkan berbagai trade-off seperti kepatuhan spesifikasi dan ukuran kode.
 Jika Anda ingin menerapkan dukungan untuk polyfill khusus, Anda dapat menggunakan @babel/helper-define-polyfill-provider . ( docs/polyfill-provider.md .) 
 Metode injeksi
 Plugin Polyfill dapat menampilkan tiga metode injeksi berbeda: entry-global , usage-global , dan usage-pure . Perhatikan bahwa plugin polyfill tidak secara otomatis menambahkan paket yang diperlukan ke dependensi Anda, jadi Anda harus mencantumkannya secara eksplisit di package.json Anda.
 Semua contoh mengasumsikan bahwa Anda menargetkan Chrome 62.
 Metode entry-global menggantikan satu impor sederhana ke seluruh polyfill dengan impor ke fitur spesifik yang tidak didukung oleh lingkungan target. Ini sangat berguna ketika Anda ingin memastikan bahwa setiap fungsi yang tidak didukung tersedia, terlepas dari apa yang Anda gunakan dalam kode yang Anda kompilasi dengan Babel. Anda mungkin ingin menggunakan metode ini jika:
 Anda tidak mengkompilasi dependensi Anda, tetapi Anda ingin memastikan bahwa dependensi tersebut memiliki semua polyfill yang diperlukan;
 Logika deteksi Babel tidak cukup pintar untuk memahami fungsi mana yang Anda gunakan;
 Anda ingin memiliki satu file bundel yang berisi semua polyfill, tanpa perlu membuatnya ulang saat kode Anda berubah.
 Masukkan kode  Kode keluaran 
 import "core-js" ;  import "core-js/modules/es7.array.flat-map.js" ;
import "core-js/modules/es6.array.sort.js" ;
import "core-js/modules/es7.promise.finally.js" ;
import "core-js/modules/es7.symbol.async-iterator.js" ;
import "core-js/modules/es7.string.trim-left.js" ;
import "core-js/modules/es7.string.trim-right.js" ;
import "core-js/modules/web.timers.js" ;
import "core-js/modules/web.immediate.js" ;
import "core-js/modules/web.dom.iterable.js" ;
 Metode usage-global memasukkan impor ke polyfill yang dilampirkan pada cakupan global, tetapi hanya untuk fitur yang tidak didukung yang digunakan dalam kode Anda. Anda mungkin ingin menggunakan metode ini jika:
 Anda perlu menjaga ukuran kode Anda sekecil mungkin, dan hanya menyertakan apa yang digunakan secara efektif;
 polyfill Anda tidak mendukung satu titik masuk, tetapi setiap fiturnya harus dimuat secara terpisah.
 Masukkan kode  Kode keluaran 
 foo . flatMap ( x => [ x , x + 1 ] ) ;
bar . trimLeft ( ) ;
arr . includes ( 2 ) ;  [x, x + 1]);
bar.trimLeft();
arr.includes(2);"> import "core-js/modules/es.array.flat-map.js" ;
import "core-js/modules/es.array.unscopables.flat-map.js" ;
import "core-js/modules/es.string.trim-start.js" ;

foo . flatMap ( x => [ x , x + 1 ] ) ;
bar . trimLeft ( ) ;
arr . includes ( 2 ) ;
 Metode usage-pure memasukkan impor ke polyfill untuk fitur yang tidak didukung yang digunakan dalam kode Anda, tanpa melampirkan polyfill ke cakupan global tetapi mengimpornya sebagai fungsi normal. Anda mungkin ingin menggunakan metode ini jika:
 Anda adalah penulis perpustakaan, dan tidak ingin "mencemari" cakupan global dengan polyfill yang Anda muat.
 Masukkan kode  Kode keluaran 
 foo . flatMap ( x => [ x , x + 1 ] ) ;
bar . trimLeft ( ) ;
arr . includes ( 2 ) ;  [x, x + 1]);
_trimLeftInstanceProperty(bar).call(bar);
arr.includes(2);"> import _flatMapInstanceProperty from "core-js-pure/stable/instance/flat-map.js" ;
import _trimLeftInstanceProperty from "core-js-pure/stable/instance/trim-left.js" ;

_flatMapInstanceProperty ( foo ) . call ( foo , x => [ x , x + 1 ] ) ;
_trimLeftInstanceProperty ( bar ) . call ( bar ) ;
arr . includes ( 2 ) ; 
 Sejarah dan Motivasi
 Dalam tiga setengah tahun terakhir, @babel/preset-env telah menunjukkan potensi penuhnya dalam mengurangi ukuran bundel tidak hanya dengan tidak mentranspilasi fitur sintaksis yang didukung, namun juga dengan tidak menyertakan polyfill core-js yang tidak perlu.
 Sejauh ini Babel menyediakan tiga cara berbeda untuk memasukkan polyfill core-js ke dalam kode sumber:
 Dengan menggunakan opsi useBuiltIns: "entry" @babel/preset-env , dimungkinkan untuk memasukkan polyfill yang dapat diinstal sendiri untuk setiap fungsi ECMAScript yang tidak didukung secara asli oleh browser target;
 Dengan menggunakan useBuiltIns: "usage" @babel/preset-env , Babel hanya akan menyuntikkan polyfill yang dapat diinstal sendiri untuk fitur ECMAScript yang tidak didukung tetapi hanya jika fitur tersebut benar-benar digunakan dalam kode sumber masukan;
 Dengan menggunakan @babel/plugin-transform-runtime , Babel akan memasukkan polyfill "murni" (yang, tidak seperti yang menginstal sendiri, tidak mencemari cakupan global) untuk setiap fitur ECMAScript yang digunakan yang didukung oleh core-js . Ini biasanya digunakan oleh penulis perpustakaan.
 Pendekatan lama kami memiliki dua masalah utama:
 Opsi targets @babel/preset-env tidak dapat digunakan dengan polyfill "murni", karena @babel/plugin-transform-runtime adalah paket yang sepenuhnya terpisah.
 Kami memaksa pengguna kami untuk menggunakan core-js jika mereka menginginkan integrasi Babel. core-js adalah polyfill yang bagus dan komprehensif, namun tidak sesuai dengan kebutuhan semua pengguna kami.
 Dengan paket baru ini kami mengusulkan solusi untuk kedua masalah ini, sambil tetap mempertahankan kompatibilitas penuh.
 Ingin berkontribusi?
 Lihat CONTRIBUTING.md kami untuk memulai menyiapkan repo.

Konfigurasi	Masukkan kode	Kode keluaran
{ "targets" : { "firefox" : 65 }, "plugins" : [ [ " polyfill-es-shims " , { "method" : " usage-global " }] ] }	Promise . allSettled ( [ p1 , p2 ] ) . finally ( ( ) => { console . log ( "Done!" ) ; } ) ;	{ console.log("Done!"); });"> import "promise.prototype.finally/auto" ; import "promise.allsettled/auto" ; Promise . allSettled ( [ p1 , p2 ] ) . finally ( ( ) => { console . log ( "Done!" ) ; } ) ;

poliisi	Pengaya	Metode
`core-js@2`	`babel-plugin-polyfill-corejs2`	`entry-global` , `usage-global` dan `usage-pure`
`core-js@3`	`babel-plugin-polyfill-corejs3`	`entry-global` , `usage-global` dan `usage-pure`
`es-shims`	`babel-plugin-polyfill-es-shims`	`usage-global` dan `usage-pure`
`regenerator-runtime`	`babel-plugin-polyfill-regenerator`	`entry-global` , `usage-global` dan `usage-pure`

Masukkan kode	Kode keluaran
import "core-js" ;	import "core-js/modules/es7.array.flat-map.js" ; import "core-js/modules/es6.array.sort.js" ; import "core-js/modules/es7.promise.finally.js" ; import "core-js/modules/es7.symbol.async-iterator.js" ; import "core-js/modules/es7.string.trim-left.js" ; import "core-js/modules/es7.string.trim-right.js" ; import "core-js/modules/web.timers.js" ; import "core-js/modules/web.immediate.js" ; import "core-js/modules/web.dom.iterable.js" ;

Masukkan kode	Kode keluaran
foo . flatMap ( x => [ x , x + 1 ] ) ; bar . trimLeft ( ) ; arr . includes ( 2 ) ;	[x, x + 1]); bar.trimLeft(); arr.includes(2);"> import "core-js/modules/es.array.flat-map.js" ; import "core-js/modules/es.array.unscopables.flat-map.js" ; import "core-js/modules/es.string.trim-start.js" ; foo . flatMap ( x => [ x , x + 1 ] ) ; bar . trimLeft ( ) ; arr . includes ( 2 ) ;

Masukkan kode	Kode keluaran
foo . flatMap ( x => [ x , x + 1 ] ) ; bar . trimLeft ( ) ; arr . includes ( 2 ) ;	[x, x + 1]); _trimLeftInstanceProperty(bar).call(bar); arr.includes(2);"> import _flatMapInstanceProperty from "core-js-pure/stable/instance/flat-map.js" ; import _trimLeftInstanceProperty from "core-js-pure/stable/instance/trim-left.js" ; _flatMapInstanceProperty ( foo ) . call ( foo , x => [ x , x + 1 ] ) ; _trimLeftInstanceProperty ( bar ) . call ( bar ) ; arr . includes ( 2 ) ;