Babel Js Nedir? Nasıl Kullanılır?

JavaScript geliştikçe ve yeni özellikler eklendikçe eski tarayıcılar ile bir uyum sorunu oluşturmaktadır. ECMAScript 2015+ kodlarının eski tarayıcılar ile çalışması için bu kodları onların anlayacağı şekilde düzenlemek gerekiyor. Aksi halde yeni sürüm JavaScript kodları eski tarayıcılarda çalışmayacaktır.

Tüm bilgisayar kullanıcıları tarayıcılarını güncel tutmadığı için şuanda büyük bir kitle eski sürüm tarayıcı kullanıyor. Bu nedenlede eğer sayfamızın / kodlarımızın daha çok sistemde doğru çalışmasını istiyorsak bu kodları ya eski JavaScript sürümlerine uygun yazacağız veya Babel JS gibi bir kompiler ile eski sürümlere uygun hale getireceğiz.

Babeljs ECMAScript 2015+ standartlarına yazılan kodların eski nesil tarayıcılar ile çalışması için gerekli kod dönüştürmeyi (compile) bizim için yapar.

BabejJS Nasıl Kullanılır?

Farklı araçlar ile Babel Js kullanılabilir. Mesela konsol üzerinden (CLI), Ember, Nodemon, Node, Electron gibi. Benzer şekilde çalışsalar da kendi aralarında bazı farklılıklar olabilir. Bu nedenle BabelJS setup sayfasından bu konuda tam bilgi alınabilir. Biz burada konsol üzerinden nasıl işlem yapılacağını ve bu işlemi yaparken nelere dikkat etmemiz gerektiği üzerinde duracağız. Bunları öğrendiğinizde istediğiniz araca ve kütüphane ile birlikte BabelJSyi kullanmanız oldukça kolay olacaktır.

Adım Adım BabelJS İle Uygulama Geliştirme

Bu bölümde ECMAScript 2015+ ile yazacağımız basit bir uygulamayı BabelJS ile nasıl compile edeceğimizi ve eski sürümlere uygun hale getireceğimizi göreceğiz. Bu nedenle sıfırdan bir proje geliştireceğiz.

**Not : ** Sisteminizde npm paket yöneticisi kurulu kabul ediyoruz.

Bir Klasör Oluşturalım

İlk olarak projemiz için babel-den isimli klasör oluşturalım. Siz isterseniz farklı bir isim de verebilirsiniz. Klasörümüzü oluşturduktan sonra yapmamız gereken bir npm projesi başlatmak.

Npm Projesi Başlatalım

Bunun için bir konsol ekranı açalım (terminal) ve terminal içerisinde klasörümüzün içersine girelim. Burada bir npm projesi oluşturalım.

npm init

Komutu ile bu işelmi yapabilirsiniz. Örnek bir çalışma olacağı için tüm sorulara evet (y) cevabı vermeniz yeterli olacaktır. Bunun sonuncunda klasörümüz içerisinde package.json dosyası oluşacaktır. Şimdi src isimli bir klasör oluşturalım. JavaScript kodlarımızı bu klasör içerisinde saklayacağız.

BabelJSyi Kuralım

Şimdi sistemimize BabelJSyi kuracağız. Bunun için bir kaç paket kurmamız gerekecek. İlk olarak @babel/core ve @babel/cli paketlerini kuralım.

npm install --save-dev @babel/core @babel/cli

Paketler kurulduktan sonra eğer package.json dosyasını incelersek

{
  "devDependencies": {
   "@babel/cli": "^7.0.0",
   "@babel/core": "^7.0.0"
  }
}

kodlarının eklendiğini göreceğiz. ( Babel Js sürümüne göre farklılık gösterebilir )

Kodlarımızı Yazalım

Şimdi src klasörü içerisinde app.js olarak bir dosya oluşturalım. Oluşturduğumuz dosya içeriği aşağıdaki gibi olsun.

const yazdir = (msg) => console.log(msg);

let msg = 'Merhaba Dünya';

yazdir(msg);

Bu kısa kod içerisinde bir arrow fonksiyon ve let özelliğini kullandık. Bu iki özelliği eski sürüm tarayıcılar desteklemiyorlar. Bu nedenle eski tarayıcılarda çalışmayacaktır. Bunun için bu kodları eski tarayıcılar ile uyumlu hale getirmemiz gerekecek.

Babel JS’yi kulanmadan önce yapmamız geren bir işlem daha var. Build almak için gerekli kodu package.json dosyasına eklemeliyiz. Bunun için script bölümüne “build”: “babel src -d lib” kodunu eklememiz gerekiyor. Burada src compile edilecek dosyaların olduğu dizini, lib ise compile edildikten sonra oluşan dosyaların bulunduğu dizini belirtir. package.json dosyası aşağıdakine benzer olacaktır.

{
  "name": "babel-den",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "babel src -d lib"
  },
  "author": "",
  "license": "ISC"
}

Şimdi oluşturduğumuz JavaScript dosyalarını compile etme zamanı.

BabelJSyi Çalıştıralım

Artık BabelJS ve kodlarımız hazır olduğuna göre compile ederek yazdığımız kodları eski sürüm tarayıcıların kullanacağı hale getirelim. Bunun için

npm run build

komutunu verelim. Bu komutu package.json içerisinde kendimiz tanımlamıştık. Eğer bir sorun olmadı ise

> babel-den@1.0.0 build
> babel src -d lib

Successfully compiled 1 file with Babel (82ms).

şeklinde bir mesaj ile işlemin bittiğini göreceksiniz. İşlem bittiğinde lib klasörü içerisinde app.js klasörünü göreceksiniz. Dikkat ederseniz hem src ve hemde lib klasöründeki app.js dosyaları aynı şekilde. Hiç bir değişiklik olmamış. Burada önemli bir konu var. Biz Babele ne yapması gerektiğini söylemedik. Bu ne demek? Hangi tarayıcılara uygun olacak? Hangi plugin kullanılacak? Hangi işlemler yapılacak?

Aslında biz sadece yazdığımız kodun eski sürüm tarayıcılar ile çalışmasını istiyoruz. Bunun için yapmamız gereken ise

npm install @babel/preset-env --save-dev

komutu ile @babel/preset-env paketini kurmak ve sonrasında projemizin kök dizininde babel.config.json dosyasını oluşturmak. Bu dosya temel olarak şu şekildedir.

{
 "presets": ["@babel/preset-env"]
}

Biz burada hangi tarayıcılar için uyum istediğimizi belirtmeliyiz. Bunun için ayrıntılı bilgiyi preset-env eklentisi sayfasında bulabilirsiniz. Biz burada bir örnek vererek işlemimize devam edeceğiz.

{
  "presets": [
    [
      "@babel/preset-env",
      {
        "targets": {
          "edge": "11",
          "firefox": "30",
          "chrome": "37",
          "safari": "11.1"
        },
        "useBuiltIns": "entry",
        "corejs": "3.22"
      }
    ]
  ]
}

Tarayıcı sürümlerini belirterek bu sürümlerden itibaren çalışan bir kod istediğimizi belirtiyoruz. Şimdi babel.config.json dosyamızı bu şekilde düzenleyelim. Ardından npm run build diyerek sonucu görelim.

İşlem bittiğinde lib/app.js dosyasının içeriği artık

"use strict";

var yazdir = function yazdir(msg) {
  return console.log(msg);
};

var msg = 'Merhaba Dünya';
yazdir(msg);

şeklinde olacaktır. Bu kod hem eski sürüm tarayıcılar ve hemde yeni sürüm tarayıcılar ile birlikte çalışacağı için bizim için daha kullanışlı olacaktır.

Burada tarayıcı uyumluluğu için sürüm belirtmek yerine farklı yöntemler de kullanabiliriz. Bunun için preset-env sayfasını incelemeniz uygun olacaktır.

Proje dosyalarını Github üzerinden ulaşabilirsiniz.

Sizde konu hakkında bir şeyler eklemek veya soru sormak isterseniz yorumlar bölümünden bize ulaşabilirsiniz.