BabelJS - Babel Ön Ayarları
Babel ön ayarları, babel aktarıcısına belirtilen modda aktarmasını söyleyen yapılandırma ayrıntılarıdır. İşte bu bölümde tartışacağımız en popüler ön ayarlardan bazıları:
- ES2015
- Env
- React
Kodun dönüştürülmesini istediğimiz ortama sahip ön ayarları kullanmamız gerekir. Örneğin, es2015 ön ayarı kodu es5'e dönüştürecektir . Env değerine sahip ön ayar da es5'e dönüşür . Ayrıca ek özelliği, yani seçenekleri vardır. Özelliğin tarayıcıların son sürümlerinde desteklenmesini istiyorsanız, babel kodu yalnızca bu tarayıcılarda özellik desteği yoksa dönüştürür. Preset react ile Babel, ne zaman tepki vermesi gerektiğini kodu aktarır.
Ön Ayarlarla çalışmak için proje kök klasörümüzde .babelrc dosyası oluşturmamız gerekiyor. Çalışmayı göstermek için aşağıda gösterildiği gibi bir proje kurulumu oluşturacağız.
komut
npm init
Babel cli, babel core vb. İle birlikte gerekli babel ön ayarını aşağıdaki şekilde kurmamız gerekiyor.
Babel 6 paketleri
npm install babel-cli babel-core babel-preset-es2015 --save-dev
Babel 7 Paketleri
npm install @babel/cli @babel/core @babel/preset-env --save-dev
Note - babel-preset-es2015, babel 7'den itibaren kullanımdan kaldırılmıştır.
es2015 or @babel/env
Projenin kök dizininde .babelrc dosyası oluşturun (babel 6) -
.Babelrc'de ön ayarlar es2015'tir. Bu, babel derleyicisine kodun es2015'e dönüştürülmesini istediğimizin göstergesidir.
Babel 7 için aşağıdaki ön ayarları kullanmamız gerekiyor -
{
"presets":["@babel/env"]
}
İşte kurulumdan sonra package.json -
Babel'i yerel olarak kurduğumuz için, package.json'daki scripts bölümüne babel komutunu ekledik.
Önceden ayarlanmış es2015'i kullanarak aktarmayı kontrol etmek için basit bir örnek üzerinde çalışalım.
Misal
main.js
let arrow = () => {
return "this is es6 arrow function";
}
Aşağıda gösterildiği gibi es5'e aktarılmıştır.
komut
npx babel main.js --out-file main_es5.js
main_es5.js
"use strict";
var arrow = function arrow() {
return "this is es6 arrow function";
};
Env
Env ön ayarını kullanarak, son kodun aktarılacağı ortamı belirtebilirsiniz.
Yukarıda oluşturulan aynı proje kurulumunu kullanacağız ve aşağıda gösterildiği gibi ön ayarları es2015'ten env'e değiştireceğiz.
Ek olarak, babel-preset-env'i kurmamız gerekiyor. Aynısını kurmak için aşağıda verilen komutu uygulayacağız.
komut
npm install babel-preset-env --save-dev
Main.js'yi tekrar derleyip çıktıyı göreceğiz.
main.js
let arrow = () => {
return "this is es6 arrow function";
}
komut
npx babel main.js --out-file main_env.js
main_env.js
"use strict";
var arrow = function arrow() {
return "this is es6 arrow function";
};
Aktarılan kodun es5 olduğunu gördük. Kodumuzun çalıştırılacağı ortamı bildiğimiz takdirde, bunu belirtmek için bu ön ayarı kullanabiliriz. Örneğin, tarayıcıları aşağıda gösterildiği gibi chrome ve firefox için son 1 sürüm olarak belirtirsek.
komut
npx babel main.js --out-file main_env.js
main_env.js
"use strict";
let arrow = () => {
return "this is es6 arrow function";
};
Şimdi ok işlevi sözdizimini olduğu gibi alıyoruz. ES5 sözdizimine aktarılmaz. Bunun nedeni, kodumuzun desteklemesini istediğimiz ortamın zaten ok işlevini desteklemesidir.
Babel, babel-preset-env kullanarak kodu çevreye göre derlemekle ilgilenir. Derlemeyi aşağıda gösterildiği gibi nodejs ortamına göre de hedefleyebiliriz
Kodun son derlemesi aşağıda gösterildiği gibidir.
komut
npx babel main.js --out-file main_env.js
main_env.js
"use strict";
let arrow = () => {
return "this is es6 arrow function";
};
Babel, kodu nodejs'nin mevcut sürümüne göre derler.
Tepki Ön Ayarı
Reactjs kullanırken react ön ayarını kullanabiliriz. Basit bir örnek üzerinde çalışacağız ve çıktıyı görmek için react ön ayarını kullanacağız.
Ön ayarı kullanmak için babel-preset-react (babel 6) 'yı aşağıdaki gibi kurmamız gerekir -
npm install --save-dev babel-preset-react
Babel 7 için aşağıdaki gibidir -
npm install --save-dev @babel/preset-react
Babel6 için .babelrc'ye yapılan değişiklikler aşağıdaki gibidir -
Babel 7 için
{
"presets": ["@babel/preset-react"]
}
main.js
<h1>Hello, world!</h1>
komut
npx babel main.js --out-file main_env.js
main_env.js
React.createElement(
"h1",
null,
"Hello, world!"
);
Main.js'deki kod, ön ayar: react ile reactjs sözdizimine dönüştürülür.