BabelJS - ES6 Kod Yürütme

BabelJSJavaScript'e eklenen yeni özellikleri ES5'e dönüştüren veya verilen ön ayar veya eklentiye göre tepki veren bir JavaScript aktarıcısıdır. ES5, JavaScript'in en eski formlarından biridir ve yeni ve eski tarayıcılarda herhangi bir sorun olmadan çalışması desteklenir. Bu eğitimdeki örneklerin çoğunda, kodu ES5'e aktardık.

ES6, ES7 ve ES8'e eklenen ok fonksiyonları, sınıflar, vaatler, jeneratörler, asenkron fonksiyonlar gibi birçok özellik gördük. Yeni eklenen özelliklerden herhangi biri eski tarayıcılarda kullanıldığında, hata atar. BabelJS, eski tarayıcılarla geriye dönük uyumlu olan kodu derlemeye yardımcı olur. ES5'in eski tarayıcılarda sorunsuz çalıştığını gördük. Dolayısıyla, proje ortamı detaylarını göz önünde bulundurarak, eğer eski tarayıcılarda çalışması gerekiyorsa, projemizdeki herhangi bir yeni özelliği kullanabilir ve babeljs kullanarak kodu ES5'e derleyebilir ve herhangi bir sorun olmadan herhangi bir tarayıcıda kullanabiliriz.

Bunu anlamak için aşağıdaki örneği ele alalım.

Misal

<!DOCTYPE html>
<html>
   <head>
      <title>BabelJs Testing</title>
   </head>
   <body>
      <script type="text/javascript" src="index.js"></script>
   </body>
</html>

index.js dosyası

var _foo = () => {
   return "Hello World"
};

alert(_foo());

Çıktı

Yukarıdaki html'yi Chrome tarayıcısında çalıştırdığımızda, aşağıdaki çıktıyı alıyoruz -

HTML Firefox'ta çalıştırıldığında, aşağıdaki çıktıyı üretir -

Ve aynı HTML Internet Explorer'da çalıştırıldığında, aşağıdaki sözdizimi hatasını oluşturur -

ES6 Arrow fonksiyonunu kullandık; aynısı yukarıda görüldüğü gibi tüm tarayıcılarda çalışmaz. Bunu çalıştırmak için, kodu ES5'e derlemek ve tüm tarayıcılarda kullanmak için BabelJS'ye sahibiz.

Babeljs kullanarak js dosyasını es5'e derleyecek ve tarayıcılarda tekrar kontrol edecektir.

Html dosyasında, aşağıda gösterildiği gibi index_new.js'yi kullanacağız -

<!DOCTYPE html>
<html>
   <head>
      <title>BabelJs Testing</title>
   </head>
   <body>
      <script type="text/javascript" src="index_new.js"></script>
   </body>
</html>

index_new.js

"use strict";

var _foo = function _foo() {
   return "Hello World";
};

alert(_foo());

Chrome Çıkışı

Firefox Tarayıcı Çıkışı

IE Tarayıcı Çıkışı