Babel nima va transpilyatsiya nima uchun kerak?

Savol

Babel nima va u zamonaviy frontend-dasturlashda nima uchun kerak?

Qisqa javob

Babel — bu transpilyator: zamonaviy JavaScript kodini (ES6+) eski brauzerlar va bajarilish muhitlariga tushunarli, eskiroq standartdagi (odatda ES5) ekvivalent kodga aylantiradigan vosita.

Batafsil javob

Brauzerlar turli tezlikda yangilanadi va foydalanuvchilarning bir qismi yangi sintaksisni qo'llab-quvvatlamaydigan eski versiyalardan foydalanishi mumkin. Babel bu muammoni hal qiladi: dasturchi zamonaviy, qulay kod yozadi, Babel esa yig'ish bosqichida uni mos ekvivalentga aylantiradi.

Bu qadam-baqadam qanday ishlaydi:

1. Parse — manba kodi AST'ga (abstrakt sintaktik daraxt) ajratiladi.
2. Transform — Babel plaginlari/presetlari daraxtni aylanib chiqadi va zamonaviy konstruksiyalarni eski ekvivalentlarga almashtiradi.
3. Generate — o'zgartirilgan AST'dan yakuniy kod generatsiya qilinadi.

Babel o'z-o'zidan eski muhitlarda yo'q funksiyalarni (masalan, Promise yoki Array.prototype.includes) qo'shmaydi — buning uchun polifillar (core-js) kerak, Babel esa faqat sintaksisni o'zgartiradi.

Zamonaviy vositalarda (Vite, shu jumladan Nuxt ishlatadigan) Babel ko'pincha "qopqoq ostida" yashiringan yoki ko'pchilik transformatsiyalar uchun tezroq muqobillar (esbuild, SWC) bilan almashtirilgan, lekin murakkab holatlar va ekotizim plaginlari uchun de-fakto standart bo'lib qolmoqda.

Misol

// Transpilyatsiyagacha (ES6+)
const greet = (name) => {
  return `Hello, ${name}!`
}
console.log(greet('John'))

// Babel transpilyatsiyasidan keyin (ES5)
"use strict"

var greet = function greet(name) {
  return "Hello, " + name + "!"
}
console.log(greet('John'))

Qo'shimcha savollar

• Transpilyatsiya polifillardan nimasi bilan farq qiladi?
• browserslist nima va u Babel nimani transpilyatsiya qilishiga qanday ta'sir qiladi?
• Nega Vite dev-yig'ish uchun Babel emas, esbuild ishlatadi?