ไลบรารีมาตรฐานแบบแยกส่วนสำหรับ JavaScript รวม polyfills สำหรับ ECMAScript จนถึงปี 2024: คำมั่นสัญญา สัญลักษณ์ คอลเลกชัน ตัววนซ้ำ อาร์เรย์ที่พิมพ์ คุณลักษณะอื่นๆ อีกมากมาย ข้อเสนอ ECMAScript คุณลักษณะ WHATWG / W3C ข้ามแพลตฟอร์มบางส่วน และข้อเสนอ เช่น
URL
คุณสามารถโหลดเฉพาะคุณสมบัติที่จำเป็นหรือใช้งานได้โดยไม่มีมลภาวะเนมสเปซทั่วโลก
หากคุณกำลังมองหาเอกสารประกอบสำหรับ core-js@2
ที่ล้าสมัย โปรดตรวจสอบสาขานี้
core-js
ไม่ได้รับการสนับสนุนจากบริษัท ดังนั้นอนาคตของโปรเจ็กต์นี้จึงขึ้นอยู่กับคุณ ร่วมเป็นผู้สนับสนุนหรือผู้สนับสนุนหากคุณสนใจ core-js
: Open Collective , Patreon , Boosty , Bitcoin ( bc1qlea7544qtsmj2rayg0lthvza9fau63ux0fstcz ) , Alipay
ตัวอย่างการใช้งาน :
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])
คุณสามารถโหลดคุณสมบัติที่จำเป็นเท่านั้น :
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])
หรือใช้โดยไม่มีมลภาวะเนมสเปซระดับโลก :
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])
postinstall
@babel/polyfill
@babel/preset-env
@babel/runtime
globalThis
Array.prototype.includes
Array.prototype.flat
/ Array.prototype.flatMap
Array
ค้นหาจากสุดท้ายArray
โดยการคัดลอกArray
ArrayBuffer.prototype.transfer
และเพื่อนๆIterator
Object.values
/ Object.entries
Object.fromEntries
Object.getOwnPropertyDescriptors
Object.prototype.hasOwnProperty
ที่สามารถเข้าถึงได้String
String.prototype.matchAll
String.prototype.replaceAll
String.prototype.trimStart
/ String.prototype.trimEnd
s
สถานะ RegExp
( dotAll
)RegExp
ตั้งชื่อกลุ่มการจับภาพPromise.allSettled
Promise.any
Promise.prototype.finally
Promise.try
Promise.withResolvers
Symbol.asyncIterator
สำหรับการวนซ้ำแบบอะซิงโครนัสSymbol.prototype.description
JSON.stringify
ที่มีรูปแบบดีSet
ใหม่Array.fromAsync
JSON.parse
Float16
วิธีUint8Array
ถึง / จาก base64 และ hexRegExp
กำลังหลบหนีMath.sumPrecise
Symbol.metadata
สำหรับข้อเสนอเมตาดาต้าของนักตกแต่งIterator
AsyncIterator
Iterator.range
Map
Array.isTemplateObject
String.dedent
Symbol
Symbol.customMatcher
สำหรับตัวแยกObservable
.of
และ .from
ในตัวสร้างคอลเลกชันcompositeKey
และ compositeSymbol
Array
Array
DataView
รับ / ตั้งค่าวิธี Uint8Clamped
Number.fromString
String.cooked
String.prototype.codePoints
Symbol.customMatcher
สำหรับการจับคู่รูปแบบFunction.prototype.demethodize
Function.{ isCallable, isConstructor }
Reflect
ข้อมูลเมตาself
structuredClone
setTimeout
และ setInterval
setImmediate
queueMicrotask
URL
และ URLSearchParams
DOMException
// 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]
หรือคุณสามารถใช้ core-js
จาก CDN
postinstall
โปรเจ็กต์ core-js
ต้องการความช่วยเหลือจากคุณ ดังนั้นแพ็คเกจจึงแสดงข้อความเกี่ยวกับโปรเจ็กต์หลังการติดตั้ง หากมันสร้างปัญหาให้กับคุณ คุณสามารถปิดการใช้งานได้:
ADBLOCK=true npm install
// or
DISABLE_OPENCOLLECTIVE=true npm install
// or
npm install --loglevel silent
คุณสามารถนำเข้าโพลีฟิลเฉพาะที่จำเป็นสำหรับคุณได้ เช่นในตัวอย่างที่ด้านบนของ README.md
จุดเข้า CommonJS ที่พร้อมใช้งานสำหรับเมธอด / ตัวสร้างและเนมสเปซแบบโพลีฟิลทั้งหมด เพียงตัวอย่างบางส่วน:
// 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" ;
เคล็ดลับ
แนะนำให้ใช้เนมสเปซ /actual/
เนื่องจากมีคุณลักษณะ JavaScript จริงทั้งหมด และไม่รวมถึงข้อเสนอระยะเริ่มต้นที่ไม่เสถียรซึ่งมีให้สำหรับการทดลองเป็นหลัก
คำเตือน
modules
เป็น API ภายใน ไม่ได้ฉีดการพึ่งพาที่จำเป็นทั้งหมด และสามารถเปลี่ยนแปลงได้ในการเผยแพร่รองหรือแพทช์ ใช้เฉพาะกับรุ่นที่กำหนดเองและ/หรือหากคุณรู้ว่าคุณกำลังทำอะไรอยู่core-js
กับส่วนขยายของอ็อบเจ็กต์เนทิฟ แนะนำให้โหลดโมดูล core-js
ทั้งหมดที่ด้านบนของจุดเริ่มต้นแอปพลิเคชันของคุณ ไม่เช่นนั้นคุณอาจมีข้อขัดแย้งได้Symbol.iterator
ของตัวเอง ซึ่งขัดแย้งกับ Array.from
, URLSearchParams
และ / หรืออย่างอื่นจาก core-js
โปรดดูปัญหาที่เกี่ยวข้องcore-js
core-js
เป็นแบบโมดูลาร์อย่างยิ่งและใช้โมดูลขนาดเล็กจำนวนมาก ด้วยเหตุนี้สำหรับการใช้งานในเบราว์เซอร์จึงรวม core-js
เข้าด้วยกันแทนตัวโหลดการใช้งานสำหรับแต่ละไฟล์ ไม่เช่นนั้น คุณจะมีคำขอนับร้อย ในเวอร์ชัน pure
เราไม่สามารถสร้างมลพิษให้กับต้นแบบของตัวสร้างดั้งเดิมได้ ด้วยเหตุนี้ วิธีการต้นแบบจึงถูกแปลงเป็นวิธีการคงที่เหมือนในตัวอย่างด้านบน แต่สำหรับทรานสไพเลอร์ เราสามารถใช้เคล็ดลับอีกอย่างหนึ่งได้ - ตัวดำเนินการผูกและวิธีการเสมือน พิเศษสำหรับสิ่งนั้น มี /virtual/
จุดเริ่มต้น ตัวอย่าง:
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
คำเตือน
ตัวดำเนินการผูกเป็นข้อเสนอ ECMAScript ในระยะเริ่มแรก และการใช้ไวยากรณ์นี้อาจเป็นอันตรายได้
core-js
ถูกรวมเข้ากับ babel
และเป็นฐานสำหรับคุณสมบัติ babel
ที่เกี่ยวข้องกับ polyfilling:
@babel/polyfill
⬆ @babel/polyfill
IS เป็นเพียงการนำเข้าฟีเจอร์ core-js
ที่เสถียรและ regenerator-runtime
สำหรับตัวสร้างและฟังก์ชัน async ดังนั้นหากคุณโหลด @babel/polyfill
คุณจะโหลด core-js
เวอร์ชันสากลโดยไม่มีข้อเสนอ ES
ตอนนี้เลิกใช้แล้วเพื่อรวมส่วนที่จำเป็นของ core-js
และ regenerator-runtime
แยกต่างหาก และเหลือไว้บน core-js@2
เพื่อป้องกันการเปลี่ยนแปลงที่เสียหาย
เนื่องจากเท่ากับ @babel/polyfill
คุณสามารถใช้สิ่งนี้:
import 'core-js/stable' ;
import 'regenerator-runtime/runtime' ;
@babel/preset-env
⬆ @babel/preset-env
มีตัวเลือก useBuiltIns
ซึ่งปรับการทำงานให้เหมาะสมที่สุดกับ core-js
เวอร์ชันสากล ด้วยตัวเลือก useBuiltIns
คุณควรตั้งค่าตัวเลือก corejs
เป็นเวอร์ชันที่ใช้ของ core-js
เช่น corejs: '3.39'
สำคัญ
แนะนำให้ระบุเวอร์ชัน core-js
รองที่ใช้ เช่น corejs: '3.39'
แทน corejs: 3
เนื่องจากด้วย corejs: 3
จะไม่ถูกฉีดโมดูลซึ่งถูกเพิ่มในรุ่น core-js
รอง
useBuiltIns: 'entry'
แทนที่การนำเข้า core-js
เพื่อนำเข้าที่จำเป็นสำหรับโมดูลสภาพแวดล้อมเป้าหมายเท่านั้น ตัวอย่างเช่น import 'core-js/stable' ;
ด้วยเป้าหมาย chrome 71
จะถูกแทนที่ด้วย:
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' ;
มันใช้งานได้กับจุดเริ่มต้นทั้งหมดของ core-js
เวอร์ชันสากลและชุดค่าผสมของพวกมัน เป็นต้น
import 'core-js/es' ;
import 'core-js/proposals/set-methods' ;
import 'core-js/full/set/map' ;
ด้วยเป้าหมาย chrome 71
คุณจะได้ผลดังนี้:
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'
จะเพิ่มที่ด้านบนของการนำเข้าไฟล์แต่ละไฟล์ของ polyfills สำหรับฟีเจอร์ที่ใช้ในไฟล์นี้และไม่รองรับโดยสภาพแวดล้อมเป้าหมาย ดังนั้นสำหรับ: // first file:
let set = new Set ( [ 1 , 2 , 3 ] ) ;
// second file:
let array = Array . of ( 1 , 2 , 3 ) ;
หากเป้าหมายมีสภาพแวดล้อมแบบเก่าเช่น IE 11
เราจะมีลักษณะดังนี้:
// 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 ) ;
ตามค่าเริ่มต้น @babel/preset-env
พร้อมด้วยตัวเลือก useBuiltIns: 'usage'
จะเติมเฉพาะฟีเจอร์ที่เสถียรเท่านั้น แต่คุณสามารถเปิดใช้งานการเติมโพลีของข้อเสนอได้โดยตัวเลือก proposals
เช่น corejs: { version: '3.39', proposals: true }
สำคัญ
ในกรณีของ useBuiltIns: 'usage'
คุณไม่ควรเพิ่มการนำเข้า core-js
ด้วยตัวเอง เพราะจะถูกเพิ่มโดยอัตโนมัติ
@babel/runtime
⬆ @babel/runtime
พร้อม corejs: 3
ตัวเลือกช่วยลดความยุ่งยากในการทำงานกับ core-js-pure
โดยจะแทนที่การใช้คุณสมบัติสมัยใหม่จากไลบรารีมาตรฐาน JS โดยอัตโนมัติเพื่อนำเข้าจากเวอร์ชันของ core-js
โดยไม่มีมลภาวะเนมสเปซทั่วโลก ดังนั้นแทนที่จะ:
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 ) ) ;
คุณสามารถเขียนเพียง:
Array . from ( new Set ( [ 1 , 2 , 3 , 2 , 1 ] ) ) ;
[ 1 , [ 2 , 3 ] , [ 4 , [ 5 ] ] ] . flat ( 2 ) ;
Promise . resolve ( 32 ) . then ( x => console . log ( x ) ) ;
ตามค่าเริ่มต้น @babel/runtime
จะทำเฉพาะคุณสมบัติที่เสถียรเท่านั้น แต่เช่นเดียวกับใน @babel/preset-env
คุณสามารถเปิดใช้งานการเติมข้อเสนอหลายรายการตามตัวเลือก proposals
ได้ เช่น corejs: { version: 3, proposals: true }
คำเตือน
หากคุณใช้ @babel/preset-env
และ @babel/runtime
ร่วมกัน ให้ใช้ตัวเลือก corejs
ในที่เดียวเท่านั้น เนื่องจากเป็นฟังก์ชันที่ซ้ำกันและจะทำให้เกิดความขัดแย้ง
Transpiler JavaScript ที่รวดเร็ว swc
มีการผสานรวมกับ core-js
ซึ่งปรับการทำงานให้เหมาะสมที่สุดกับ core-js
เวอร์ชันสากล เช่นเดียวกับ @babel/preset-env
มันมี 2 โหมด: usage
และ entry
แต่โหมด usage
ยังคงทำงานได้ไม่ดีเท่ากับใน babel
ตัวอย่างการกำหนดค่าใน .swcrc
:
{
"env" : {
"targets" : " > 0.25%, not dead " ,
"mode" : " entry " ,
"coreJs" : " 3.39 "
}
}
ตามค่าเริ่มต้น core-js
จะตั้งค่า polyfills เมื่อจำเป็นเท่านั้น นั่นหมายความว่า core-js
จะตรวจสอบว่าฟีเจอร์นั้นพร้อมใช้งานและทำงานอย่างถูกต้องหรือไม่ และหากไม่มีปัญหา core-js
จะใช้การใช้งานแบบเนทิฟ
แต่บางครั้งการตรวจจับฟีเจอร์ core-js
อาจเข้มงวดเกินไปสำหรับกรณีของคุณ ตัวอย่างเช่น Promise
Constructor ต้องการการสนับสนุนการติดตามการปฏิเสธที่ไม่สามารถจัดการได้และ @@species
บางครั้งเราอาจมีปัญหาผกผัน - สภาพแวดล้อมที่เสียหายโดยเจตนาโดยมีปัญหาที่ไม่ครอบคลุมอยู่ในการตรวจจับฟีเจอร์ core-js
ในกรณีเหล่านั้น เราสามารถกำหนดลักษณะการทำงานนี้ใหม่สำหรับโพลีฟิลบางตัวได้:
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' ) ;
มันใช้งานไม่ได้กับคุณสมบัติบางอย่าง นอกจากนี้ หากคุณเปลี่ยนพฤติกรรมเริ่มต้น แม้แต่ core-js
ภายในก็อาจทำงานไม่ถูกต้อง
ในบางกรณีอาจมีประโยชน์ในการยกเว้นฟีเจอร์ core-js
บางอย่างหรือสร้างโพลีฟิลสำหรับเอ็นจิ้นเป้าหมาย คุณสามารถใช้แพ็คเกจ core-js-builder
สำหรับสิ่งนั้นได้
core-js
พยายามสนับสนุนเอ็นจิ้น JS และสภาพแวดล้อมที่เป็นไปได้ทั้งหมดด้วยการรองรับ ES3 คุณสมบัติบางอย่างมีแถบด้านล่างที่สูงกว่า - ตัวอย่างเช่น ตัวเข้าถึง บางตัว สามารถทำงานได้อย่างถูกต้องจาก ES5 เท่านั้น สัญญาต้องมีวิธีในการตั้งค่าไมโครทาสก์หรืองาน ฯลฯ
อย่างไรก็ตาม ฉันไม่มีโอกาสทดสอบ core-js
ได้ทุกที่ เช่น การทดสอบใน IE7- และการทดสอบแบบโบราณอื่นๆ หยุดทำงาน รายการเอ็นจิ้นที่รองรับอย่างแน่นอน คุณสามารถดูได้ในตารางความเข้ากันได้ตามลิงค์ด้านล่าง เขียนหากคุณมีปัญหาหรือคำถามเกี่ยวกับการสนับสนุนของกลไกใดๆ
โครงการ core-js
ให้ข้อมูลที่จำเป็นทั้งหมด (เป็นแพ็คเกจ core-js-compat
) เกี่ยวกับความจำเป็นของโมดูล core-js
จุดเข้าใช้งาน และเครื่องมือสำหรับการทำงานร่วมกับมัน - มันมีประโยชน์สำหรับการทำงานร่วมกับเครื่องมือเช่น babel
หรือ swc
หากคุณต้องการความช่วยเหลือ คุณสามารถดูส่วนที่เกี่ยวข้องของ CONTRIBUTING.md
การแสดงข้อมูลความเข้ากันได้และตัวดำเนินการทดสอบเบราว์เซอร์มีอยู่ที่นี่ ตัวอย่าง:
จุดเข้า CommonJS:
core-js(-pure)
จุดเข้า CommonJS:
core-js(-pure)/es
โมดูล 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 } ) ) :