Babel kullanarak Javascript ECMAScript 6 Kodlarını ECMAScript 5'e Çevirme

 Gereksinimler

Node.js ve NPM nin kurulu olması gerekiyor.

Adımlar

1. Proje Oluşturmak

Önce projemiz için bir klasör açacağız.

 Projenin Klasör Yapısı

/babeldemo (Proje Klasörü)

    /src           (ES6 ile yazılan JS kodları src altında tutulacak)

 komut satırı ile proje klasörüne girip npm init komutuyla package.json oluşturalım.

 

Bu aşamanın komut satırında yazılışı örnek

D:\>mkdir babeldemo

D:\>cd babeldemo

D:\babeldemo>mkdir src

D:\babeldemo>npm init
This utility will walk you through creating a package.json file.
It only covers the most common items, and tries to guess sensible defaults.

See `npm help init` for definitive documentation on these fields
and exactly what they do.

Use `npm install <pkg>` afterwards to install a package and
save it as a dependency in the package.json file.

Press ^C at any time to quit.
package name: (babeldemo)
version: (1.0.0)
description:
entry point: (index.js)
test command:
git repository:
keywords:
author:
license: (ISC)
About to write to D:\babeldemo\package.json:

{
  "name": "babeldemo",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC"
}


Is this OK? (yes)

D:\babeldemo>                                                                                                                       

2.Babel Modüllerini Kurmak

Aşağıda ki komutu kullanarak babel-cli ve babel-preset-env kurulur

npm install babel-cli babel-preset-env

Babel, kaynak js sürümünü belirlemek için .babelrc diye bir dosya arar, bu yüzden proje klasörüne .babelrc dosyası oluşturarak içine aşağıda ki değerleri yazıyoruz.

{
  "presets": ["env"]
}

Yukarıda ki durumda "env" ES6 ve sonrası için tüm kodları dönüştürmesi talimatını verir.

3. Babel'i çalıştırmak için pacakage.json da scripts isimli alana babeli çalıştırması için gereken komutun kısaltılışını yazacağız. Burada biz "build" olarak verdik.

"scripts": { 
  "test": "echo \"Error: no test specified\" && exit 1",  
  "build": "babel src -d lib"
}

komutu açıklarsak babel src klasöründe ki ES6+ kodlarını ES5 e dönüştürerek lib klasörüne taşı.

4. Örnek ES6 Javascript Kodu Oluşturalım. src klasörümüzün içine eğer elinizde varsa ES6 kodları ekleyin yoksa benim örnekte oluşturduğum javascript dosyasını src klasörünün altında example.js ismiyle ekleyebilirsiniz.

//src/example.js

const add = (x, y) => { return x + y };

const num1 = 1;
const num2 = 2;

let sum = add(num1, num2);

console.log(`The sum of ${num1} and ${num2} is ${sum}.`); 

Şimdi Babel'i çalıştıralım. Tekrar komut satırından aşağıda ki satırı yazarak kodu çalıştıralım.

npm run build

Babel bizim için src içinde ki tüm ES6 kodlarını ES5 e çevirerek lib klasörü altına taşıdı.

example.js nin ES5 formatında çıktısı aşağıda ki gibidir.

 

 

"use strict";

var add = function add(x, y) {
  return x + y;
};

var num1 = 1;
var num2 = 2;

var sum = add(num1, num2);

console.log("The sum of " + num1 + " and " + num2 + " is " + sum + ".");