Kod sifati

Polyfill va transpilyatorlar

JavaScript tili muntazam rivojlanadi — har yili yangi imkoniyatlar qo'shiladi. Ammo bu yangiliklar barcha (ayniqsa eski) brauzerlarda darhol ishlamaydi. Ular bilan ishlash uchun ikki asosiy vosita bor: transpilyatorlar va polyfill'lar.

Muammo: yangi til, eski brauzerlar

Aytaylik, biz zamonaviy sintaksisdan foydalanamiz — masalan, "nullish coalescing" operatori ??. Yangi brauzerlar buni tushunadi, lekin eskilari xato beradi. Bizga kodni eski brauzerlar ham tushunadigan holatga keltirish kerak.

// zamonaviy kod (eski brauzerlar tushunmaydi)
let balandlik = kirim ?? 100;

Transpilyatorlar

Transpilyator (transpiler) — bir kodni o'qib, uni boshqa (odatda eskiroq) sintaksisga qayta yozib beradigan maxsus dastur. Eng mashhur JavaScript transpilyatori — Babel.

Babel yuqoridagi zamonaviy kodni eski brauzerlar tushunadigan shaklga o'giradi:

// transpilyatsiyadan OLDIN (zamonaviy)
let balandlik = kirim ?? 100;

// transpilyatsiyadan KEYIN (eski sintaksis)
let balandlik = (kirim !== undefined && kirim !== null) ? kirim : 100;

Odatda dasturchi Babel'ni build tizimi (masalan, webpack) ichida ishlatadi. Har safar kod o'zgarganda, build tizimi avtomatik ravishda transpilyatsiyani ishga tushiradi.

Transpilyator faqat sintaksisni o'zgartiradi — masalan, yangi operatorlar va til konstruksiyalarini. Yangi funksiyalar (metodlar) muammosini u hal qilmaydi. Buning uchun polyfill kerak.

Polyfill'lar

Ba'zi yangiliklar — bu sintaksis emas, balki tilga qo'shilgan yangi funksiyalar. Masalan, Math.trunc(x) — sonning kasr qismini olib tashlaydigan funksiya. Eski dvigatellarda bu funksiya umuman mavjud emas.

Polyfill — bu yetishmayotgan funksiyaning o'rnini to'ldiradigan ("yamaydigan") kod. U funksiya mavjudligini tekshiradi va bo'lmasa, uni qo'lda qo'shadi:

// Math.trunc uchun oddiy polyfill
if (!Math.trunc) { // agar funksiya yo'q bo'lsa
  Math.trunc = function(number) {
    // Math.ceil salbiy, Math.floor musbat sonlar uchun
    return number < 0 ? Math.ceil(number) : Math.floor(number);
  };
}

Endi kodimizni ishlatishdan oldin bu polyfill yuklansa, eski brauzerda ham Math.trunc ishlaydi. Yangi brauzerlarda esa if sharti false bo'lgani uchun polyfill hech narsa qilmaydi.

core-js

Har bir funksiya uchun polyfill'ni qo'lda yozish mumkin emas. Shuning uchun tayyor polyfill to'plamlari bor. Eng mashhuri — core-js. U yuzlab zamonaviy funksiyalarni eski muhitlar uchun to'ldiradi.

core-js — keng qamrovli polyfill kutubxonasi (masalan, Promise, Array.from, Object.entries va h.k.);
U modullarga bo'lingan — faqat kerakli qismini ulash mumkin, bu esa hajmni kamaytiradi;
Odatda Babel bilan birgalikda ishlatiladi.

Amalda dasturchilar odatda polyfill'larni qo'lda yozmaydi. Babel'ni core-js bilan sozlaydi va u qaysi polyfill'lar kerakligini avtomatik aniqlab, ulaydi.

Transpilyator va polyfill — farqi

Ikki vositani chalkashtirmaslik uchun:

Transpilyator — yangi sintaksisni eski shaklga o'giradi (masalan, =>, ??, let/const);
Polyfill — yetishmayotgan funksiya/metodlarni qo'shadi (masalan, Promise, Math.trunc).

Agar sizning auditoriyangiz faqat zamonaviy brauzerlardan foydalansa, transpilyatsiya va polyfill'lar shart bo'lmasligi mumkin. Ular kod hajmini oshiradi — faqat haqiqatan kerak bo'lganda ishlating.

Xulosa

Zamonaviy JavaScript hamma brauzerlarda darhol ishlamaydi;
Transpilyator (Babel) yangi sintaksisni eski shaklga o'giradi;
Polyfill yetishmayotgan funksiyalarni qo'shadi;
core-js — tayyor polyfill'lar to'plami, odatda Babel bilan birga ishlatiladi.