core js

Saya sangat merekomendasikan membaca ini: Jadi, apa selanjutnya?

Pustaka standar modular untuk JavaScript. Termasuk polyfill untuk ECMAScript hingga 2024: janji, simbol, koleksi, iterator, array yang diketik, banyak fitur lainnya, proposal ECMAScript, beberapa fitur WHATWG / W3C lintas platform, dan proposal seperti URL . Anda hanya dapat memuat fitur yang diperlukan atau menggunakannya tanpa polusi namespace global.

Jika Anda mencari dokumentasi untuk core-js@2 yang sudah usang, silakan periksa cabang ini.

core-js@3, babel dan pandangan ke masa depan

Mengumpulkan dana

core-js tidak didukung oleh perusahaan, jadi masa depan proyek ini bergantung pada Anda. Menjadi sponsor atau pendukung jika Anda tertarik dengan core-js : Open Collective , Patreon , Boosty , Bitcoin (bc1qlea7544qtsmj2rayg0lthvza9fau63ux0fstcz) , Alipay .

---

---

---

Contoh penggunaan :

 import 'core-js/actual' ;

Promise . resolve ( 42 ) . then ( it => console . log ( it ) ) ; // => 42

Array . from ( new Set ( [ 1 , 2 , 3 ] ) . union ( new Set ( [ 3 , 4 , 5 ] ) ) ) ; // => [1, 2, 3, 4, 5]

[ 1 , 2 ] . flatMap ( it => [ it , it ] ) ; // => [1, 1, 2, 2]

( function * ( i ) { while ( true ) yield i ++ ; } ) ( 1 )
  . drop ( 1 ) . take ( 5 )
  . filter ( it => it % 2 )
  . map ( it => it ** 2 )
  . toArray ( ) ; // => [9, 25]

structuredClone ( new Set ( [ 1 , 2 , 3 ] ) ) ; // => new Set([1, 2, 3])

Anda hanya dapat memuat fitur yang diperlukan :

 import 'core-js/actual/promise' ;
import 'core-js/actual/set' ;
import 'core-js/actual/iterator' ;
import 'core-js/actual/array/from' ;
import 'core-js/actual/array/flat-map' ;
import 'core-js/actual/structured-clone' ;

Promise . resolve ( 42 ) . then ( it => console . log ( it ) ) ; // => 42

Array . from ( new Set ( [ 1 , 2 , 3 ] ) . union ( new Set ( [ 3 , 4 , 5 ] ) ) ) ; // => [1, 2, 3, 4, 5]

[ 1 , 2 ] . flatMap ( it => [ it , it ] ) ; // => [1, 1, 2, 2]

( function * ( i ) { while ( true ) yield i ++ ; } ) ( 1 )
  . drop ( 1 ) . take ( 5 )
  . filter ( it => it % 2 )
  . map ( it => it ** 2 )
  . toArray ( ) ; // => [9, 25]

structuredClone ( new Set ( [ 1 , 2 , 3 ] ) ) ; // => new Set([1, 2, 3])

Atau gunakan tanpa polusi namespace global :

 import Promise from 'core-js-pure/actual/promise' ;
import Set from 'core-js-pure/actual/set' ;
import Iterator from 'core-js-pure/actual/iterator' ;
import from from 'core-js-pure/actual/array/from' ;
import flatMap from 'core-js-pure/actual/array/flat-map' ;
import structuredClone from 'core-js-pure/actual/structured-clone' ;

Promise . resolve ( 42 ) . then ( it => console . log ( it ) ) ; // => 42

from ( new Set ( [ 1 , 2 , 3 ] ) . union ( new Set ( [ 3 , 4 , 5 ] ) ) ) ; // => [1, 2, 3, 4, 5]

flatMap ( [ 1 , 2 ] , it => [ it , it ] ) ; // => [1, 1, 2, 2]

Iterator . from ( function * ( i ) { while ( true ) yield i ++ ; } ( 1 ) )
  . drop ( 1 ) . take ( 5 )
  . filter ( it => it % 2 )
  . map ( it => it ** 2 )
  . toArray ( ) ; // => [9, 25]

structuredClone ( new Set ( [ 1 , 2 , 3 ] ) ) ; // => new Set([1, 2, 3])

Indeks

• Penggunaan
  • Instalasi
  • pesan postinstall
  • API CommonJS
  • Babel
    • @babel/polyfill
    • @babel/preset-env
    • @babel/runtime
  • swc
  • Tingkat agresivitas yang dapat dikonfigurasi
  • Pembuatan khusus
• Mesin yang didukung dan data kompatibilitas
• Fitur
  • Skrip ECMA
    • Skrip ECMA: Objek
    • Skrip ECMA: Fungsi
    • Skrip ECMA: Kesalahan
    • Skrip ECMA: Array
    • Skrip ECMA: Iterator
    • ECMAScript: String dan RegExp
    • Skrip ECMA: Nomor
    • Skrip ECMA: Matematika
    • Skrip ECMA: Tanggal
    • ECMAScript: Janji
    • Skrip ECMA: Simbol
    • ECMAScript: Koleksi
    • ECMAScript: Array yang Diketik
    • ECMAScript: Renungkan
    • Skrip ECMA: JSON
    • Skrip ECMA: globalIni
  • Proposal ECMAScript
    • Proposal yang sudah selesai
      • globalThis
      • Metode pengindeksan relatif
      • Array.prototype.includes
      • Array.prototype.flat / Array.prototype.flatMap
      • Temukan Array dari yang terakhir
      • Ubah Array dengan menyalin
      • Pengelompokan Array
      • ArrayBuffer.prototype.transfer dan teman-teman
      • Pembantu Iterator
      • Object.values / Object.entries
      • Object.fromEntries
      • Object.getOwnPropertyDescriptors
      • Object.prototype.hasOwnProperty yang Dapat Diakses.prototype.hasOwnProperty
      • Bantalan String
      • String.prototype.matchAll
      • String.prototype.replaceAll
      • String.prototype.trimStart / String.prototype.trimEnd
      • s RegExp ( dotAll ).
      • RegExp bernama grup penangkapan
      • Promise.allSettled
      • Promise.any
      • Promise.prototype.finally
      • Promise.try
      • Promise.withResolvers
      • Symbol.asyncIterator untuk iterasi asinkron
      • Symbol.prototype.description
      • JSON.stringify yang terbentuk dengan baik
      • String unicode yang terbentuk dengan baik
      • Set metode baru
    • Proposal tahap 3
      • Array.fromAsync
      • Akses teks sumber JSON.parse
      • Metode Float16
      • Uint8Array ke / dari base64 dan hex
      • Manajemen sumber daya eksplisit
      • RegExp lolos
      • Math.sumPrecise
      • Symbol.metadata untuk proposal metadata dekorator
    • Proposal tahap 2.7
      • Urutan Iterator
    • Proposal tahap 2
      • Pembantu AsyncIterator
      • Iterator.range
      • Map terbalik
      • Array.isTemplateObject
      • String.dedent
      • Predikat Symbol
      • Symbol.customMatcher untuk ekstraktor
    • Proposal tahap 1
      • Observable
      • Metode pengumpulan baru
      • Metode .of dan .from pada konstruktor koleksi
      • compositeKey dan compositeSymbol
      • Pemfilteran Array
      • Deduplikasi Array
      • DataView mendapatkan/mengatur metode Uint8Clamped
      • Number.fromString
      • String.cooked
      • String.prototype.codePoints
      • Symbol.customMatcher untuk pencocokan pola
    • Proposal tahap 0
      • Function.prototype.demethodize
      • Function.{ isCallable, isConstructor }
    • Proposal pra tahap 0
      • Reflect metadata
  • Standar web
    • self
    • structuredClone
    • Metode utilitas Base64
    • setTimeout dan setInterval
    • setImmediate
    • queueMicrotask
    • URL dan URLSearchParams
    • DOMException
    • koleksi DOM yang dapat diubah
  • Pembantu iterasi
• Polyfill tidak ada
• Berkontribusi
• Kebijakan keamanan
• log perubahan

Penggunaan⬆

Instalasi:⬆

// global version
npm install --save [email protected]
// version without global namespace pollution
npm install --save [email protected]
// bundled global version
npm install --save [email protected]

Atau Anda bisa menggunakan core-js dari CDN.

pesan postinstall

Proyek core-js memerlukan bantuan Anda, sehingga paket menampilkan pesan tentang hal itu setelah instalasi. Jika ini menimbulkan masalah bagi Anda, Anda dapat menonaktifkannya:

ADBLOCK=true npm install
// or
DISABLE_OPENCOLLECTIVE=true npm install
// or
npm install --loglevel silent

API CommonJS⬆

Anda hanya dapat mengimpor polyfill yang diperlukan untuk Anda, seperti pada contoh di atas README.md . Titik masuk CommonJS tersedia untuk semua metode/konstruktor dan ruang nama polyfilled. Beberapa contoh saja:

 // polyfill all `core-js` features, including early-stage proposals:
import "core-js" ;
// or:
import "core-js/full" ;
// polyfill all actual features - stable ES, web standards and stage 3 ES proposals:
import "core-js/actual" ;
// polyfill only stable features - ES and web standards:
import "core-js/stable" ;
// polyfill only stable ES features:
import "core-js/es" ;

// if you want to polyfill `Set`:
// all `Set`-related features, with early-stage ES proposals:
import "core-js/full/set" ;
// stable required for `Set` ES features, features from web standards and stage 3 ES proposals:
import "core-js/actual/set" ;
// stable required for `Set` ES features and features from web standards
// (DOM collections iterator in this case):
import "core-js/stable/set" ;
// only stable ES features required for `Set`:
import "core-js/es/set" ;
// the same without global namespace pollution:
import Set from "core-js-pure/full/set" ;
import Set from "core-js-pure/actual/set" ;
import Set from "core-js-pure/stable/set" ;
import Set from "core-js-pure/es/set" ;

// if you want to polyfill just the required methods:
import "core-js/full/set/intersection" ;
import "core-js/actual/array/find-last" ;
import "core-js/stable/queue-microtask" ;
import "core-js/es/array/from" ;

// polyfill iterator helpers proposal:
import "core-js/proposals/iterator-helpers" ;
// polyfill all stage 2+ proposals:
import "core-js/stage/2" ; 

Tip

Penggunaan namespace /actual/ direkomendasikan karena mencakup semua fitur JavaScript aktual dan tidak mencakup proposal tahap awal yang tidak stabil yang tersedia terutama untuk eksperimen.

Peringatan

• Jalur modules adalah API internal, tidak memasukkan semua dependensi yang diperlukan dan dapat diubah dalam rilis minor atau patch. Gunakan hanya untuk bangunan khusus dan/atau jika Anda tahu apa yang Anda lakukan.
• Jika Anda menggunakan core-js dengan ekstensi objek asli, disarankan untuk memuat semua modul core-js di bagian atas titik masuk aplikasi Anda, jika tidak, Anda dapat mengalami konflik.
  • Misalnya, Google Maps menggunakan Symbol.iterator sendiri, yang bertentangan dengan Array.from , URLSearchParams dan/atau yang lain dari core-js , lihat masalah terkait.
  • Konflik tersebut juga dapat diselesaikan dengan menemukan dan menambahkan secara manual setiap entri yang bertentangan dari core-js .
• core-js sangat modular dan menggunakan banyak modul yang sangat kecil, oleh karena itu untuk penggunaan di browser, bundel core-js alih-alih pemuat penggunaan untuk setiap file, jika tidak, Anda akan memiliki ratusan permintaan.

Metode CommonJS dan prototipe tanpa polusi namespace global⬆

Dalam versi pure , kami tidak dapat mencemari prototipe konstruktor asli. Oleh karena itu, metode prototype diubah menjadi metode statis seperti pada contoh di atas. Namun dengan transpiler, kita dapat menggunakan satu trik lagi - operator pengikat dan metode virtual. Khusus untuk itu, tersedia /virtual/ titik masuk. Contoh:

 import fill from 'core-js-pure/actual/array/virtual/fill' ;
import findIndex from 'core-js-pure/actual/array/virtual/find-index' ;

Array ( 10 ) :: fill ( 0 ) . map ( ( a , b ) => b * b ) :: findIndex ( it => it && ! ( it % 8 ) ) ; // => 4 

Peringatan

Operator pengikatan adalah proposal ECMAScript tahap awal dan penggunaan sintaksis ini bisa berbahaya.

Babel⬆

core-js terintegrasi dengan babel dan merupakan dasar untuk fitur babel terkait polyfilling:

@babel/polyfill ⬆

@babel/polyfill IS hanyalah impor fitur core-js yang stabil dan regenerator-runtime untuk generator dan fungsi async, jadi jika Anda memuat @babel/polyfill - Anda memuat core-js versi global tanpa proposal ES.

Sekarang sudah tidak digunakan lagi karena mendukung penyertaan terpisah dari bagian-bagian yang diperlukan dari core-js dan regenerator-runtime dan, untuk mencegah perubahan yang dapat menyebabkan gangguan, dibiarkan di core-js@2 .

Sama seperti @babel/polyfill , Anda dapat menggunakan ini:

 import 'core-js/stable' ;
import 'regenerator-runtime/runtime' ; 

@babel/preset-env ⬆

@babel/preset-env memiliki opsi useBuiltIns , yang mengoptimalkan kerja dengan core-js versi global. Dengan opsi useBuiltIns , Anda juga harus menyetel opsi corejs ke versi core-js yang digunakan, seperti corejs: '3.39' .

Penting

Direkomendasikan untuk menentukan versi minor core-js yang digunakan, seperti corejs: '3.39' , daripada corejs: 3 , karena dengan corejs: 3 tidak akan dimasukkan modul yang ditambahkan dalam rilis minor core-js .

---

• useBuiltIns: 'entry' menggantikan impor core-js untuk mengimpor hanya diperlukan untuk modul lingkungan target. Jadi, misalnya,

 import 'core-js/stable' ;

dengan target chrome 71 akan diganti hanya menjadi:

 import 'core-js/modules/es.array.unscopables.flat' ;
import 'core-js/modules/es.array.unscopables.flat-map' ;
import 'core-js/modules/es.object.from-entries' ;
import 'core-js/modules/web.immediate' ;

Ini berfungsi untuk semua titik masuk core-js versi global dan kombinasinya, misalnya untuk

 import 'core-js/es' ;
import 'core-js/proposals/set-methods' ;
import 'core-js/full/set/map' ;

dengan target chrome 71 Anda akan mendapatkan hasilnya:

 import 'core-js/modules/es.array.unscopables.flat' ;
import 'core-js/modules/es.array.unscopables.flat-map' ;
import 'core-js/modules/es.object.from-entries' ;
import 'core-js/modules/esnext.set.difference' ;
import 'core-js/modules/esnext.set.intersection' ;
import 'core-js/modules/esnext.set.is-disjoint-from' ;
import 'core-js/modules/esnext.set.is-subset-of' ;
import 'core-js/modules/esnext.set.is-superset-of' ;
import 'core-js/modules/esnext.set.map' ;
import 'core-js/modules/esnext.set.symmetric-difference' ;
import 'core-js/modules/esnext.set.union' ;

• useBuiltIns: 'usage' menambah bagian atas setiap file impor polyfill untuk fitur yang digunakan dalam file ini dan tidak didukung oleh lingkungan target, jadi untuk:

 // first file:
let set = new Set ( [ 1 , 2 , 3 ] ) ; 

 // second file:
let array = Array . of ( 1 , 2 , 3 ) ;

jika target berisi lingkungan lama seperti IE 11 kita akan memiliki sesuatu seperti:

 // first file:
import 'core-js/modules/es.array.iterator' ;
import 'core-js/modules/es.object.to-string' ;
import 'core-js/modules/es.set' ;

var set = new Set ( [ 1 , 2 , 3 ] ) ; 

 // second file:
import 'core-js/modules/es.array.of' ;

var array = Array . of ( 1 , 2 , 3 ) ;

Secara default, @babel/preset-env dengan opsi useBuiltIns: 'usage' hanya memiliki fitur polyfill yang stabil, namun Anda dapat mengaktifkan polyfilling proposal dengan opsi proposals , seperti corejs: { version: '3.39', proposals: true } .

Penting

Dalam kasus useBuiltIns: 'usage' , Anda tidak boleh menambahkan impor core-js sendiri, impor tersebut akan ditambahkan secara otomatis.

@babel/runtime ⬆

@babel/runtime dengan opsi corejs: 3 menyederhanakan pekerjaan dengan core-js-pure . Ini secara otomatis menggantikan penggunaan fitur modern dari perpustakaan standar JS untuk mengimpor dari versi core-js tanpa polusi namespace global, jadi alih-alih:

 import from from 'core-js-pure/stable/array/from' ;
import flat from 'core-js-pure/stable/array/flat' ;
import Set from 'core-js-pure/stable/set' ;
import Promise from 'core-js-pure/stable/promise' ;

from ( new Set ( [ 1 , 2 , 3 , 2 , 1 ] ) ) ;
flat ( [ 1 , [ 2 , 3 ] , [ 4 , [ 5 ] ] ] , 2 ) ;
Promise . resolve ( 32 ) . then ( x => console . log ( x ) ) ;

Anda dapat menulis saja:

 Array . from ( new Set ( [ 1 , 2 , 3 , 2 , 1 ] ) ) ;
[ 1 , [ 2 , 3 ] , [ 4 , [ 5 ] ] ] . flat ( 2 ) ;
Promise . resolve ( 32 ) . then ( x => console . log ( x ) ) ;

Secara default, @babel/runtime hanya memiliki fitur stabil polyfill, tetapi seperti di @babel/preset-env , Anda dapat mengaktifkan opsi polyfilling proposal berdasarkan proposals , seperti corejs: { version: 3, proposals: true } .

Peringatan

Jika Anda menggunakan @babel/preset-env dan @babel/runtime secara bersamaan, gunakan opsi corejs hanya di satu tempat karena fungsinya duplikat dan akan menyebabkan konflik.

swc⬆

Transpiler JavaScript cepat swc berisi integrasi dengan core-js , yang mengoptimalkan pekerjaan dengan versi global core-js . Seperti @babel/preset-env , ia memiliki 2 mode: usage dan entry , tetapi mode usage masih berfungsi tidak sebaik di babel . Contoh konfigurasi di .swcrc :

{
  "env" : {
    "targets" : " > 0.25%, not dead " ,
    "mode" : " entry " ,
    "coreJs" : " 3.39 "
  }
}

Tingkat agresivitas yang dapat dikonfigurasi⬆

Secara default, core-js menyetel polyfill hanya jika diperlukan. Artinya core-js memeriksa apakah suatu fitur tersedia dan berfungsi dengan benar atau tidak dan jika tidak ada masalah, core-js menggunakan implementasi asli.

Namun terkadang deteksi fitur core-js mungkin terlalu ketat untuk kasus Anda. Misalnya, konstruktor Promise memerlukan dukungan pelacakan penolakan yang tidak tertangani dan @@species .

Terkadang kita dapat mengalami masalah sebaliknya - lingkungan yang sengaja rusak dengan masalah yang tidak tercakup dalam deteksi fitur core-js .

Untuk kasus tersebut, kita dapat mendefinisikan ulang perilaku ini untuk polyfill tertentu:

 const configurator = require ( 'core-js/configurator' ) ;

configurator ( {
  useNative : [ 'Promise' ] ,                                 // polyfills will be used only if natives are completely unavailable
  usePolyfill : [ 'Array.from' , 'String.prototype.padEnd' ] , // polyfills will be used anyway
  useFeatureDetection : [ 'Map' , 'Set' ] ,                    // default behavior
} ) ;

require ( 'core-js/actual' ) ;

Itu tidak berfungsi dengan beberapa fitur. Selain itu, jika Anda mengubah perilaku default, bahkan internal core-js mungkin tidak berfungsi dengan benar.

Pembuatan khusus⬆

Untuk beberapa kasus mungkin berguna untuk mengecualikan beberapa fitur core-js atau menghasilkan polyfill untuk mesin target. Anda bisa menggunakan paket core-js-builder untuk itu.

Mesin yang didukung dan data kompatibilitas⬆

core-js mencoba mendukung semua kemungkinan mesin dan lingkungan JS dengan dukungan ES3. Beberapa fitur memiliki batasan yang lebih tinggi - misalnya, beberapa pengakses hanya dapat berfungsi dengan baik dari ES5, janji memerlukan cara untuk mengatur tugas mikro atau tugas, dll.

Namun, saya tidak memiliki kemungkinan untuk menguji core-js secara mutlak di mana-mana - misalnya, pengujian di IE7- dan beberapa versi kuno lainnya dihentikan. Daftar mesin yang pasti didukung dapat Anda lihat pada tabel kompatibilitas pada tautan di bawah. Tulis jika Anda memiliki masalah atau pertanyaan dengan dukungan mesin apa pun.

proyek core-js menyediakan (sebagai paket core-js-compat ) semua data yang diperlukan tentang perlunya modul core-js , titik masuk, dan alat untuk bekerja dengannya - ini berguna untuk integrasi dengan alat seperti babel atau swc . Jika Anda ingin membantu, Anda dapat melihat bagian terkait di CONTRIBUTING.md . Visualisasi data kompatibilitas dan runner pengujian browser tersedia di sini, contohnya:

Fitur:⬆

Titik masuk CommonJS:

 core-js(-pure)

Skrip ECMA⬆

Titik masuk CommonJS:

 core-js(-pure)/es

Skrip ECMA: Objek⬆

Modul es.object.assign , es.object.create , es.object.define-getter , es.object.define-property , es.object.define-properties , es.object.define-setter , es.object.entries , es.object.freeze , es.object.from-entries , es.object.get-own-property-descriptor , es.object.get-own-property-descriptors , es.object.get-own-property-names , es.object.get-prototype-of , es.object.group-by , es.object.has-own , es.object.is , es.object.is-extensible , es.object.is-frozen , es.object.is-sealed , es.object.keys , es.object.lookup-setter , es.object.lookup-getter , es.object.prevent-extensions , es.object.proto , es.object.to-string , es.object.seal , es.object.set-prototype-of , es.object.values .

 class Object {
  toString ( ) : string ; // ES2015+ fix: @@toStringTag support
  __defineGetter__ ( property : PropertyKey , getter : Function ) : void ;
  __defineSetter__ ( property : PropertyKey , setter : Function ) : void ;
  __lookupGetter__ ( property : PropertyKey ) : Function | void ;
  __lookupSetter__ ( property : PropertyKey ) : Function | void ;
  __proto__ : Object | null ; // required a way setting of prototype - will not in IE10-, it's for modern engines like Deno
  static assign ( target : Object , ... sources : Array < Object > ) : Object ;
  static create ( prototype : Object | null , properties ?: { [ property : PropertyKey ] : PropertyDescriptor } ) : Object ;
  static defineProperties ( object : Object , properties : { [ property : PropertyKey ] : PropertyDescriptor } ) ) :