الصفحة الرئيسية>المتعلقة بالبرمجة>شفرة المصدر الأخرى
تنزيل

بابل بوليفيلز

مجموعة من مكونات Babel الإضافية التي تتيح إمكانية حقن حشوات متعددة مختلفة باستراتيجيات مختلفة في التعليمات البرمجية المترجمة الخاصة بك. بالإضافة إلى ذلك، يحتوي هذا المستودع على حزمة تساعد في إنشاء موفري عمليات تعبئة متعددة أخرى.

ينفذ هذا المستودع ما تم اقتراحه في البداية في babel/babel#10008.

إذا كنت تبحث عن بعض أمثلة الإعداد السريع، أو تريد فقط معرفة كيفية ترحيل التكوين الخاص بك، فيرجى مراجعة docs/migration.md .

الاستخدام

تقوم حزم Babel الرئيسية بتحويل بناء جملة JavaScript فقط: تحتاج أيضًا إلى تحميل polyfill، لجعل الوظائف الأصلية ( Array.prototype.flat ) أو الكائنات المضمنة ( Reflect ) تعمل في المتصفحات القديمة.

أسهل طريقة للقيام بذلك هي تحميل polyfill مباشرة باستخدام علامة " style=";text-align:right;direction:rtl">

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

ومع ذلك، من المحتمل أن يتضمن هذا الأسلوب البسيط الكثير من التعليمات البرمجية غير الضرورية. تقوم مكونات Babel الإضافية المطبقة في هذا المستودع تلقائيًا بإدخال polyfills في التعليمات البرمجية الخاصة بك، بينما تحاول تحميل ما هو مطلوب بالفعل فقط. يقوم بذلك بناءً على أهداف التجميع الخاصة بك وعلى ما تستخدمه في التعليمات البرمجية الخاصة بك.

تدعم هذه المكونات الإضافية (نطلق عليها اسم "موفري خدمة polyfill") طرق حقن مختلفة لتناسب احتياجاتك بشكل أفضل.

على سبيل المثال، إذا كنت تريد إدخال الواردات إلى 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!"); });" style=";text-align:right;direction:rtl">
 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 . لاحظ أن ملحقات polyfill لا تضيف تلقائيًا الحزمة (الحزم) الضرورية إلى تبعياتك، لذلك يجب عليك إدراجها بشكل صريح في package.json الخاص بك.

تفترض جميع الأمثلة أنك تستهدف Chrome 62.

  • يستبدل أسلوب entry-global استيرادًا واحدًا بسيطًا للملء المتعدد بالكامل بواردات إلى ميزات محددة غير مدعومة من قبل البيئات المستهدفة. يكون ذلك مفيدًا للغاية عندما تريد التأكد من توفر كل وظيفة غير مدعومة، بغض النظر عما تستخدمه في التعليمات البرمجية التي تقوم بتجميعها باستخدام 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 بإدخال عمليات الاستيراد إلى polyfills المرتبطة بالنطاق العام، ولكن فقط للميزات غير المدعومة التي يتم استخدامها في التعليمات البرمجية الخاصة بك. قد ترغب في استخدام هذه الطريقة إذا:

    1. تحتاج إلى إبقاء حجم الكود الخاص بك صغيرًا قدر الإمكان، وتضمين فقط ما يتم استخدامه بشكل فعال؛
    2. لا يدعم polyfill الخاص بك نقطة دخول واحدة، ولكن يجب تحميل كل ميزة من ميزاته بشكل منفصل.
    رمز الإدخال رمز الإخراج 
     foo . flatMap ( x => [ x , x + 1 ] ) ;
bar . trimLeft ( ) ;
arr . includes ( 2 ) ;
    [x, x + 1]); bar.trimLeft(); arr.includes(2);" style=";text-align:right;direction:rtl">
     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);" style=";text-align:right;direction:rtl">
     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 غير مدعومة أصلاً بواسطة المتصفحات المستهدفة؛
  • باستخدام useBuiltIns: "usage" @babel/preset-env ، سيقوم Babel فقط بإدخال ملفات polyfills ذاتية التثبيت لميزات ECMAScript غير المدعومة ولكن فقط إذا تم استخدامها بالفعل في كود مصدر الإدخال؛
  • باستخدام @babel/plugin-transform-runtime ، سيقوم Babel بإدخال ملفات polyfills "خالصة" (والتي، على عكس التثبيت الذاتي، لا تلوث النطاق العام) لكل ميزة ECMAScript مستخدمة مدعومة بواسطة core-js . وعادة ما يستخدم هذا من قبل مؤلفي المكتبة.

نهجنا القديم يعاني من مشكلتين رئيسيتين:

  • لم يكن من الممكن استخدام خيار targets @babel/preset-env مع polyfills "الخالصة"، لأن @babel/plugin-transform-runtime عبارة عن حزمة منفصلة تمامًا.
  • لقد أجبرنا مستخدمينا على استخدام core-js إذا أرادوا تكامل Babel. core-js هو عبارة عن polyfill جيد وشامل، لكنه لا يناسب احتياجات جميع مستخدمينا.

مع هذه الحزم الجديدة، نقترح حلاً لكلتا المشكلتين، مع الحفاظ على التوافق الكامل مع الإصدارات السابقة.

هل تريد المساهمة؟

راجع CONTRIBUTING.md الخاص بنا للبدء في إعداد الريبو.

يوسع
معلومات إضافية
تطبيقات ذات صلة
نوصي لك
أخبار ذات صلة الكل