BabelJS - Genel Bakış

BabelJSyeni özellikleri eski standartlara aktaran bir JavaScript aktarıcısıdır. Bununla, özellikler hem eski hem de yeni tarayıcılarda sorunsuz bir şekilde çalıştırılabilir. Avustralyalı bir geliştirici olan Sebastian McKenzie, BabelJS'yi kurdu.

Neden BabelJS?

JavaScript, tarayıcının anladığı dildir. Uygulamalarımızı çalıştırmak için farklı tarayıcılar kullanıyoruz - Chrome, Firefox, Internet Explorer, Microsoft Edge, Opera, UC tarayıcısı vb. ECMA Script, JavaScript dil spesifikasyonudur; ECMA Script 2015 ES6, tüm yeni ve eski tarayıcılarda iyi çalışan kararlı bir sürümdür.

ES5'ten sonra ES6, ES7 ve ES8'e sahibiz. ES6, tüm tarayıcılar tarafından tam olarak desteklenmeyen birçok yeni özellikle piyasaya sürüldü. Aynısı ES7, ES8 ve ESNext (ECMA Script'in sonraki sürümü) için de geçerlidir. Tüm tarayıcıların yayınlanan tüm ES sürümleriyle uyumlu olmasının ne zaman mümkün olacağı artık belirsiz.

Kodumuzu yazmak için ES6 veya ES7 veya ES8 özelliklerini kullanmayı planladığımızda, yeni değişikliklerin desteklenmemesi nedeniyle bazı eski tarayıcılarda kırılma eğiliminde olacaktır. Bu nedenle, ECMA Script'in yeni özelliklerini kodumuzda kullanmak istiyorsak ve mevcut tüm olası tarayıcılarda çalıştırmak istiyorsak, son kodumuzu ES5'te derleyecek bir araca ihtiyacımız var.

Babelaynı şeyi yapar ve buna, istediğimiz ECMA Script sürümündeki kodu aktaran bir aktarıcı denir. Kodumuzu aktarmamız için ihtiyaç duyduğumuz ECMA sürümünü yapılandıran ön ayarlar ve eklentiler gibi özelliklere sahiptir. Babel ile geliştiriciler, JavaScript'teki yeni özellikleri kullanarak kodlarını yazabilirler. Kullanıcılar Babel ile çevrilen kodları alabilirler; kodlar daha sonra herhangi bir sorun olmadan herhangi bir tarayıcıda kullanılabilir.

The following table lists down the features available in ES6, ES7 and ES8 −

Özellikleri	ECMA Script sürümü
Let + Const	ES6
Ok İşlevleri	ES6
Sınıflar	ES6
Sözler	ES6
Jeneratörler	ES6
Yineleyiciler	ES6
Modüller	ES6
Şeklini bozma	ES6
Şablon Değişmezleri	ES6
Geliştirilmiş Nesne	ES6
Varsayılan, Dinlenme ve Yayılma Özellikleri	ES6
Zaman uyumsuz - Bekle	ES7
Üsleme Operatörü	ES7
Array.prototype.includes ()	ES7
Dize Dolgu	ES8

BabelJS aşağıdaki iki bölümü yönetir -

transpiling
polyfilling

Babel-Transpiler nedir?

Babel-transpiler, modern JavaScript sözdizimini eski tarayıcılar tarafından kolayca anlaşılabilecek bir biçime dönüştürür. Örneğin, ok işlevi, const, let sınıfları, işlev, var, vb .'ye dönüştürülecektir. Burada sözdizimi, yani ok işlevi, her iki durumda da işlevselliği aynı tutarak normal bir işleve dönüştürülür.

Babel-polyfill nedir?

JavaScript'te sözler, haritalar ve içerikler gibi yeni özellikler eklendi. Özellikler dizi üzerinde kullanılabilir; aynı, babel kullanılarak kullanıldığında ve aktarıldığında dönüştürülmeyecektir. Yeni özelliğin bir yöntem veya nesne olması durumunda, eski tarayıcılarda çalışmasını sağlamak için Babel-polyfill'i transpiling ile birlikte kullanmamız gerekir.

JavaScript'te bulunan, kopyalanabilen ve çoklu doldurulabilen ECMA Komut Dosyası özelliklerinin listesi burada verilmiştir -

Classes
Decorators
Const
Modules
Destructing
Varsayılan parametreler
Hesaplanan mülk adları
Nesne durması / yayılması
Zaman uyumsuz işlevler
Ok fonksiyonları
Dinlenme parametreleri
Spread
Şablon Değişmezleri

ECMA Script features that can be polyfilled −

Promises
Map
Set
Symbol
Weakmap
Weakset
includess
Array.from, Array.of, Array # find, Array.buffer, Array # findIndex
Object.assign,Object.entries,Object.values

BabelJS'nin Özellikleri

Bu bölümde BabelJS'nin farklı özelliklerini öğreneceğiz. Aşağıda BabelJS'nin en önemli temel özellikleri verilmiştir -

Babel Eklentileri

Eklentiler ve Ön ayarlar, Babel'in kodu aktarması için yapılandırma ayrıntılarıdır. Babel, kodun yürütüleceği ortamı bilirsek, ayrı ayrı kullanılabilecek bir dizi eklentiyi destekler.

Babel-Ön Ayarlar

Babel ön ayarları, bir dizi eklentidir, yani Babel'e belirli bir modda aktarım yapma talimatı veren babel aktarıcısına ayrıntıları yapılandırma. Kodun dönüştürülmesini istediğimiz ortama sahip ön ayarları kullanmalıyız. Örneğin, es2015 ön ayarı kodu es5'e dönüştürecektir .

Babel-Polyfills

Yöntemler ve nesneler gibi aktarılamayan bazı özellikler vardır. Bu tür durumlarda, özelliklerin herhangi bir tarayıcıda kullanımını kolaylaştırmak için babel-polyfill'i kullanabiliriz. Sözler örneğini ele alalım; özelliğin eski tarayıcılarda çalışması için polyfill kullanmamız gerekiyor.

Babel-Polyfills

Babel-cli, kodun komut satırında kolayca derlenebileceği bir dizi komutla birlikte gelir. Ayrıca, kodun tek seferde aktarılmasını kolaylaştıran komutla birlikte kullanılacak eklentiler ve ön ayarlar gibi özelliklere de sahiptir.

BabelJS kullanmanın avantajları

Bu bölümde, BabelJS kullanımıyla ilişkili farklı avantajları öğreneceğiz -

BabelJS, JavaScript'e yeni eklenen tüm özelliklerle geriye dönük uyumluluk sağlar ve herhangi bir tarayıcıda kullanılabilir.
BabelJS, JavaScript'in bir sonraki gelecek sürümünü (ES6, ES7, ESNext, vb.) Almak için transpile etme yeteneğine sahiptir.
BabelJS, gulp, webpack, flow, react, typcript vb. İle birlikte kullanılabilir ve onu çok güçlü kılar ve geliştiricinin hayatını kolaylaştıran büyük projelerde kullanılabilir.
BabelJS ayrıca react JSX sözdizimi ile birlikte çalışır ve JSX biçiminde derlenebilir.
BabelJS, büyük projelerle çalışmayı kolaylaştıran eklentiler, çoklu dolgular, babel-cli desteğine sahiptir.

BabelJS kullanmanın dezavantajları

Bu bölümde, BabelJS kullanmanın farklı dezavantajlarını öğreneceğiz -

BabelJS kodu, aktarım sırasında sözdizimini değiştirir, bu da kodun üretimde yayınlandığında anlaşılmasını zorlaştırır.
Aktarılan kod, orijinal koda kıyasla daha büyüktür.
Tüm ES6 / 7/8 veya gelecek yeni özellikler aktarılamaz ve eski tarayıcılarda çalışması için polyfill kullanmalıyız.

İşte babeljs resmi sitesi https://babeljs.io/.