ES6 yazı serisi

ES6 açılımı ile EcmaScript 6 yazılarının ilkine hoşgeldiniz. Bu sayfa ES6 ile gelen aşağıdaki özelliklerle ilgili yazılara ulaşabilmenizi sağlayacak linklerin bulunacağı ve bu yazılardaki kodları çalıştırabilmemiz için gerekli çalışma ortamını nasıl oluşturacağımızla ilgili bir yazı olacak. Başlıkları belirlerken şu sayfadan faydalandım https://github.com/lukehoban/es6features. Aşağıdaki terimler Türkçe olarak yazılabilir fakat ilgili özellik hakkında arama yaparken Türkçe terimler aramada istenen sonuçları vermeyeceğini düşündüğüm için İngilizce olarak kalmalarının daha mantıklı olacağını düşündüm.

• arrows 
• classes 
• enhanced object literals 
• template strings 
• destructuring 
• default + rest + spread 
• let + const 
• iterators + for..of 
• generators 
• unicode 
• modules 
• module loaders 
• map + set + weakmap + weakset 
• proxies 
• symbols 
• subclassable built-ins 
• promises 
• math + number + string + array + object APIs 
• binary and octal literals 
• reflect api 
• tail calls

Bu özellikler ile çalışabilmemiz için iki farklı seçenek üzerinden gideceğiz. İlki server tabanlı uygulama geliştirme platformu olan NodeJS in 4 ve üzeri versiyonlarını kullanmak. Birçoğunu özellik hakkında yazıyı yazarken deneyeceğim için bazıları çalışmayabilir birlikte göreceğiz. İkinci seçenek ise kullanımı giderek yaygınlaşan bir javascript compiler olan babeljs. Babeljs ES6 özellikleri ile yazılan kodu ES5 şeklinde dönüştürerek kullanılmasını sağlayan bir araç. Terminal üzerinden ve gulp gibi task runnerda pluginler ile çalışabiliyor.

Şu yazımda bahsettiğim NVM yi kullanarak NodeJS in istediğiniz versiyonunu kullanabilirsiniz. ES6 ile ilgili özellikleri deneyeceğimiz için 4. versiyon ve üstü olması gerekli.

Aşağıdaki kodu es6.js olarak kaydedip terminalden node es6.js şeklinde denerseniz const çalıştığı halde alt kısımdaki arrow özelliği çalışmayacaktır.

const _ = "ES6";
console.log(_);

[1,2,3,4,5].forEach(i => {
console.log(i);
});


İşte babeljs i bu aşamada kullanacağız.

İlk olarak babeljs i terminalden çağırabilmek için babel-cli yi ve ES5 dönüştürme modülü olan babel-preset-es2015 i indirelim.

npm install -g babel-cli
npm install babel-preset-es-2015

Babel --version yazdığınızda babeljs in versiyonu geri dönüyorsa yükleme başarılı şekilde gerçekleşmiştir.

Şimdi yukarıdaki kodumuzun kayıtlı olduğu dosyayı çağırarak dönüştürme işlemini yapalım.

babel --presets es2015 es6.js -o out.js

Yukarıdaki komutu çalıştırdığınızda es6.js dosyası es5 e göre dönüştürülerek out.js dosyasına kaydedilecektir.

"use strict";

var _ = "ES6";
console.log(_);

[1, 2, 3, 4, 5].forEach(function (i) {
console.log(i);
});

Dosyayı yine node ile çalıştırırsanız ES5 e dönüştürüldüğü için bu sefer hatasız şekilde çalışacaktır.

Babeljs in global ayarlarını yapacağımız dosyamız ~/.babelrc ye bazı tanımlamalar yaparak istediğimiz özelliklerin otomatik çalışmasını sağlayabiliriz.

Örneğin aşağıdaki kodu ~/.babelrc dosyasına eklediğinizde --presets es2015 i yukarıdaki komuta eklemeye gerek kalmayacak.

{
  "presets": [ "es2015" ]
}

Babeljs in şu an ki sürümü 6.5.2. Babeljs 5 de direk ES6 ya dönüştürülerken 6. versiyon ile --presets ile belirtmek gerekiyor. ~/.babelrc ayar dosyası ile isteğe göre düzenleyebiliyoruz.

Bu ilk yazımızda çalışma ortamımızı nasıl yapılandıracağımızı basit bir şekilde anlatmaya çalıştım. Sonraki yazılarımızda babel in gulp ile kullanımını ve diğer kullanışlı modüllerinide göreceğiz. Sonraki yazıda görüşmek üzere.