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/.