Babel bir javascript transcompilerdır. Yani javascript’in bir versiyonunda (örneğin EcmaScript7 ile yazılmış) yazılmış bir kodu, tüm tarayıcıların desteklediği EcmaScript5 koduna çevirmek için kullanılır. Bunun yanında reactjs vb.. çerçevelerin kullandığı JSX uzantılı dosyaları da EcmaScript5’e çevirebilmektedir.

Programlama dillerin aslında insanların kullandığı dillere benzer. Programlama dili ile program yazan kullanıcılar aslında yazdıkları ile bilgisayarlara emirler veya süreçlerde ne yapacağını anlatırlar. Programcıların yazdıkları kodu çalıştıran IIS, Apache vs.. ile iletişim sağlar. Biz nasıl ki kendimizi anlatmaya çalışırken Türkçe konuşuyorsak programcılarda kendilerini bilgisayara anlatmak için bilgisayarın anlayacağı dili kullanırlar. Eğer bizim kullandığımız dili karşıdaki insan anlayamıyorsa bizim anlattıklarımızın pek bir önemli olmayacaktır. Javascript programlama dili için bu ortamlar nodejs ortamı veya browserlardır. Programcının yazmış olduğu javascript kodlarını bu iki ortamdan birisi çalıştır. Aslında javascript kodunu çalıştıran farklı ortamlarda vardır ama bu yazının konusu değildir. Nasıl ki Türk insanın kullandığı dilde yeni kelimeler veya kavramları veya isimler ortaya çıktığında Türk Dil Kurumu bu kavramları veya kelimeleri güncel sözlüğe eklediği gibi javascripttede yenilikler olmaktadır. Bu yenilikler için javascriptte sürüm kodu kullanarak yazılmış programların hangi sürümde yazıldığı takip edilebilir.

İşte babeljs gibi transpiler yazılımlar bizim farklı sürümlerde yazmış olduğumuz javascript kodlarını browserlar veya javascript’i çalıştırak ortamın kullandığı sürüme çevirerek çalışmasını sağlarlar.

Kısaca söyleyecek olursak; Babel, çoğunlukla ECMAScript 2015+ kodunu eski JavaScript motorları tarafından çalıştırılmasını sağlamak için geriye dönük uyumlu bir sürüme dönüştüren açık kaynak kodlu bir JavaScript transcompilerdır.

Örnek javaScipt Compiler

//Babel Input: ES2015 arrow function
[1, 2, 3].map((n) => n + 1);

// Babel Output: ES5 equivalent
[1, 2, 3].map(function(n) {
   return n + 1;
});

Örnek bir reactjs .JSX compiler :

//Babel Input: 

export default React.createClass({
	getInitialState() {
		return { num: this.getRandomNumber() };
	},

	getRandomNumber() {
		return Math.ceil(Math.random() * 6);
	},

	render() {
		return 

			Your dice roll:
			{this.state.num}
		
;
	}
});


// Babel Output: 
"use strict";

Object.defineProperty(exports, "__esModule", {
	value: true
});
exports.default = void 0;

var _default = React.createClass({
	displayName: "repl",
	getInitialState: function getInitialState() {
		return {
			num: this.getRandomNumber()
		};
	},
getRandomNumber: function getRandomNumber() {
	return Math.ceil(Math.random() * 6);
},
render: function render() {
	return /*#__PURE__*/ React.createElement( "div", null, "Your dice roll:", this.state.num);
}
});

exports.default = _default;