หน้าแรก>การเขียนโปรแกรมที่เกี่ยวข้อง>ซอร์สโค้ดอื่น ๆ
ดาวน์โหลด

บาเบล โพลีฟิลส์

ชุดปลั๊กอิน Babel ที่ช่วยให้สามารถแทรกโพลีฟิลต่างๆ ด้วยกลยุทธ์ที่แตกต่างกันในโค้ดที่คอมไพล์ของคุณ นอกจากนี้ พื้นที่เก็บข้อมูลนี้ยังมีแพ็คเกจที่ช่วยในการสร้างผู้ให้บริการสำหรับโพลีฟิลอื่นๆ

พื้นที่เก็บข้อมูลนี้ใช้สิ่งที่เสนอในตอนแรกที่ babel/babel#10008

หากคุณกำลังมองหาตัวอย่างการตั้งค่าสั้นๆ หรือเพียงต้องการดูวิธีย้ายการกำหนดค่าของคุณ โปรดตรวจสอบ docs/migration.md

การใช้งาน

แพ็คเกจ Babel หลักแปลงเฉพาะ ไวยากรณ์ JavaScript เท่านั้น : คุณต้องโหลด polyfill เพื่อให้ ฟังก์ชัน ดั้งเดิม ( Array.prototype.flat ) หรือ วัตถุในตัว ( Reflect ) ทำงานในเบราว์เซอร์รุ่นเก่า

วิธีที่ง่ายที่สุดในการดำเนินการคือโหลด polyfill โดยตรงโดยใช้แท็ก ">

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

อย่างไรก็ตาม วิธีการง่ายๆ นี้อาจมีโค้ดที่ไม่จำเป็นจำนวนมากรวมอยู่ด้วย ปลั๊กอิน Babel ที่ใช้งานในพื้นที่เก็บข้อมูลนี้จะแทรกโพลีฟิลในโค้ดของคุณโดยอัตโนมัติ ในขณะที่พยายามโหลดเฉพาะสิ่งที่จำเป็นจริงๆ เท่านั้น โดยขึ้นอยู่กับเป้าหมายการคอมไพล์ของคุณและสิ่งที่คุณใช้ในโค้ดของคุณ

ปลั๊กอินเหล่านี้ (เราเรียกว่า "ผู้ให้บริการโพลีฟิล") รองรับ วิธี การแทรกที่แตกต่างกัน เพื่อให้เหมาะกับความต้องการของคุณมากขึ้น

ตัวอย่างเช่น หากคุณต้องการแทรกการนำเข้าไปยัง es-shims polyfills โดยการเพิ่มฟังก์ชันที่ขาดหายไปให้กับอ็อบเจ็กต์โกลบอล คุณสามารถกำหนดค่า Babel ได้ดังนี้:

การกำหนดค่า รหัสอินพุต รหัสเอาท์พุท 
{
  "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!" ) ;
} ) ;

หากต้องการดูตัวอย่างการกำหนดค่าเพิ่มเติม คุณสามารถตรวจสอบเอกสารการย้าย: docs/migration.md

หากคุณสนใจที่จะอ่านเกี่ยวกับตัวเลือกทั้งหมดที่ปลั๊กอินเหล่านี้สนับสนุน คุณสามารถตรวจสอบเอกสารการใช้งาน: docs/usage.md

รองรับโพลีฟิล

โพลีฟิล ปลั๊กอิน วิธีการ
core-js@2 babel-plugin-polyfill-corejs2 entry-global usage-global และ usage-pure
core-js@3 babel-plugin-polyfill-corejs3 entry-global usage-global และ usage-pure
es-shims babel-plugin-polyfill-es-shims usage-global และ usage-pure
regenerator-runtime babel-plugin-polyfill-regenerator entry-global usage-global และ usage-pure

เรายังคงรองรับ core-js และ es-shims ต่อไป แต่เราขอแนะนำให้คุณใช้ผู้ให้บริการสำหรับ polyfill ของคุณเองหรือสำหรับผู้ให้บริการที่คุณชื่นชอบ! เป้าหมายประการหนึ่งของเราคือการส่งเสริมการแข่งขันระหว่างโพลีฟิลต่างๆ เพื่อสร้างสมดุลระหว่างข้อดีข้อเสียต่างๆ เช่น การปฏิบัติตามข้อกำหนดและขนาดโค้ด

หากคุณต้องการใช้การสนับสนุนสำหรับ polyfill ที่กำหนดเอง คุณสามารถใช้ @babel/helper-define-polyfill-provider ( docs/polyfill-provider.md .)

วิธีการฉีด

ปลั๊กอิน Polyfill สามารถเปิดเผยวิธีการฉีดที่แตกต่างกันได้สามวิธี: entry-global , usage-global และ usage-pure โปรดทราบว่าปลั๊กอินโพลีฟิลจะไม่เพิ่มแพ็กเกจที่จำเป็นลงในการอ้างอิงของคุณโดยอัตโนมัติ ดังนั้นคุณต้องแสดงรายการแพ็คเกจเหล่านี้อย่างชัดเจนใน package.json ของคุณ

ตัวอย่างทั้งหมดถือว่าคุณกำหนดเป้าหมายไปที่ Chrome 62

  • วิธีการแบบ entry-global จะแทนที่การนำเข้าแบบง่ายเพียงครั้งเดียวไปยัง polyfill ทั้งหมดด้วยการนำเข้าไปยังคุณลักษณะเฉพาะที่ไม่รองรับโดยสภาพแวดล้อมเป้าหมาย มันจะมีประโยชน์มากที่สุดเมื่อคุณต้องการให้แน่ใจว่าทุกฟังก์ชันที่ไม่รองรับนั้นพร้อมใช้งาน ไม่ว่าคุณจะใช้โค้ดอะไรในโค้ดที่คุณกำลังคอมไพล์ด้วย Babel คุณอาจต้องการใช้วิธีนี้หาก:

    1. คุณไม่ได้รวบรวมการพึ่งพาของคุณ แต่คุณต้องการให้แน่ใจว่ามีโพลีฟิลที่จำเป็นทั้งหมด
    2. ตรรกะการตรวจจับของ Babel ไม่ฉลาดพอที่จะเข้าใจว่าคุณกำลังใช้ฟังก์ชันใดอยู่
    3. คุณต้องการให้ไฟล์รวมไฟล์เดียวที่มีโพลีฟิลทั้งหมด โดยไม่จำเป็นต้องสร้างใหม่เมื่อโค้ดของคุณมีการเปลี่ยนแปลง
    รหัสอินพุต รหัสเอาท์พุท 
     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" ;

  • วิธี usage-global จะแทรกการนำเข้าไปยังโพลีฟิลที่แนบมากับขอบเขตส่วนกลาง แต่สำหรับคุณสมบัติที่ไม่รองรับซึ่งใช้ในโค้ดของคุณเท่านั้น คุณอาจต้องการใช้วิธีนี้หาก:

    1. คุณต้องรักษาขนาดโค้ดของคุณให้เล็กที่สุดเท่าที่จะเป็นไปได้ และรวมเฉพาะส่วนที่ใช้อย่างมีประสิทธิภาพเท่านั้น
    2. polyfill ของคุณไม่รองรับจุดเริ่มต้นจุดเดียว แต่ต้องโหลดคุณลักษณะแต่ละรายการแยกกัน
    รหัสอินพุต รหัสเอาท์พุท 
     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 ) ;

  • วิธี usage-pure จะแทรกการนำเข้าไปยัง polyfills สำหรับคุณสมบัติที่ไม่รองรับซึ่งใช้ในโค้ดของคุณ โดยไม่ต้องแนบ polyfills เข้ากับขอบเขตส่วนกลาง แต่นำเข้าเป็นฟังก์ชันปกติ คุณอาจต้องการใช้วิธีนี้หาก:

    1. คุณเป็นผู้เขียนห้องสมุด และไม่ต้องการ "ทำให้" ขอบเขตทั่วโลกเสียหายด้วยโพลีฟิลที่คุณกำลังโหลด
    รหัสอินพุต รหัสเอาท์พุท 
     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 ) ;

ประวัติศาสตร์และแรงจูงใจ

ในช่วงสามปีครึ่งที่ผ่านมา @babel/preset-env ได้แสดงให้เห็นถึงศักยภาพอย่างเต็มที่ในการลดขนาดบันเดิล ไม่เพียงแต่ไม่แปลงคุณสมบัติไวยากรณ์ที่รองรับเท่านั้น แต่ยังไม่รวม polyfills core-js ที่ไม่จำเป็นอีกด้วย

จนถึงตอนนี้ Babel ได้จัดเตรียมวิธีที่แตกต่างกันสามวิธีในการฉีด polyfills core-js ในซอร์สโค้ด:

  • ด้วยการใช้ตัวเลือก useBuiltIns: "entry" ของ @babel/preset-env คุณสามารถฉีด polyfills ที่ติดตั้งตัวเองได้สำหรับฟังก์ชัน ECMAScript ทุกฟังก์ชันที่เบราว์เซอร์เป้าหมายไม่รองรับ
  • ด้วยการใช้ @babel/preset-env 's useBuiltIns: "usage" Babel จะฉีดเฉพาะโพลีฟิลที่ติดตั้งด้วยตนเองสำหรับคุณสมบัติ ECMAScript ที่ไม่รองรับ แต่ เฉพาะใน กรณีที่พวกมันถูกใช้จริงในซอร์สโค้ดอินพุตเท่านั้น
  • ด้วยการใช้ @babel/plugin-transform-runtime บาเบลจะฉีดโพลีฟิล "บริสุทธิ์" (ซึ่งต่างจากการติดตั้งด้วยตนเอง ไม่ก่อให้เกิดมลพิษในขอบเขตทั่วโลก) สำหรับทุกฟีเจอร์ ECMAScript ที่ใช้ซึ่งรองรับโดย core-js โดยปกติจะใช้โดยผู้เขียนห้องสมุด

แนวทางเก่าของเรามีปัญหาหลักสองประการ:

  • ไม่สามารถใช้ตัวเลือก targets ของ @babel/preset-env กับ polyfills "pure" ได้ เนื่องจาก @babel/plugin-transform-runtime เป็นแพ็คเกจที่แยกจากกันโดยสิ้นเชิง
  • เราบังคับให้ผู้ใช้ของเราใช้ core-js หากพวกเขาต้องการบูรณาการ Babel core-js เป็นโพลีฟิลที่ดีและครอบคลุม แต่ไม่ตรงกับความต้องการของผู้ใช้ทุกคน

ด้วยแพ็คเกจใหม่นี้ เรากำลังเสนอวิธีแก้ปัญหาสำหรับปัญหาทั้งสองนี้ ในขณะที่ยังคงรักษาความเข้ากันได้แบบย้อนหลังอย่างสมบูรณ์

ต้องการที่จะมีส่วนร่วม?

ดู CONTRIBUTING.md ของเราเพื่อเริ่มต้นการตั้งค่า repo

ขยาย
ข้อมูลเพิ่มเติม
แอปที่เกี่ยวข้อง
แนะนำสำหรับคุณ
ข้อมูลที่เกี่ยวข้อง ทั้งหมด