babel-js

Babel JS ile EcmaScript6 Yazmak

Öncelikle kodlama için gerekli ortamı hazırlamak amacıyla bu yazımda ki ilk 6 maddeyi uygulayarak (Gulp’a kadar olan kısım) başlayabilirsiniz. Yazının devamına bu işlemleri yaptığınızı varsayarak devam edeceğim.

Bu aşamada paket kurulumları için npm ve bower, versiyonlama için git ve otomatizasyon için gulp hazır olacaktır.

Bahsettiğim yazıda famo.us ve angular ile ilgili kurulumları yapmanıza gerek yok burada anlattıklarım için.

Babeljs kullanabilmemiz ve ecmascript6 kodlarının ES5’e çevrilmesi için npm ile gulp-babel paketini kurmamız gerekmektedir;

$ npm install --save-dev gulp-babel

Bu komutu konsol ile proje klasörümüzde çalıştırdığımızda kurulum tamamlanacaktır.

Şimdi gulpfile.js dosyamızı yapılandıracağız.

var gulp = require('gulp');
var babel = require('gulp-babel');
 
gulp.task('default', function () {
    return gulp.src('src/app.js')
        .pipe(babel())
        .pipe(gulp.dest('build'));
});

Yukarıda ki kodu inceleyelim;

gulp ve babel‘i tanımlayarak, npm ile kurduğumuz paketleri çağırmış oluyoruz. Böylece her iki paketide kullanabilir duruma gelmiş olduk.

gulp.task ile belirttiğimiz görev, konsol üzerinden “gulp” komutunu çalıştırdığımızda yapılacak işlemleri yazdığımız bölüm olacak.

gulp.src kaynak klasörü yani işlem yapılacak klasörü belirler.

.pipe(babel()) ile babel’i bu gulp.src ile belirttiğimiz dosyalar üzerinde çalıştırmış oluruz.

gulp.dest ise dönüştürülmüş dosyayı hangi klasöre kaydedeceğimizi belirler.

Yine asıl konu dışında ne varsa anlattım=)

Ama eğer yukarıdaki tüm işlemleri yaptıysanız src içerisindeki app.js dosyasına yazdığınız tüm Ecmascript6 kodları, konsola yazacağınız gulp komutuyla ecmascript5 koduna dönüştürülecektir.

https://github.com/hootka/ES6toES5withBabel

Yukarıdaki github repository’sinden benim deneme amaçlı hazırladığım kodu inceleyebilirsiniz. Sadece çalışıp çalışmadığını denemek için yazdığım basit bir kaç değişken tanımlama kodu göreceksiniz.

Kodları neden yazdığım ve ne işe yaradığı ve ne gibi hatalar aldığımı da kod içerisinde açıklama satırlarında belirttim.

Önümüzdeki günlerde EcmaScript6 ile gelen yenilikler hakkında yazılarda yazacağım.

Bir Cevap Yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir