เริ่มต้นเขียน ECMAScript 6 ด้วย Babel ตอนที่ 1

ก่อนเริ่มต้นทำความรู้จักกับ Babel มารู้จักกับ ECMAScript 6 หรือเรียกสั้นๆว่า ES6 เป็น Specification ของ JavaScript ตัวใหม่ซึ่งตัวปัจจุบันที่เราเขียนกันอยู่ทุกวันนี้จะเป็น ECMAScript 5 หรือ ES5 ซึ่งใน ES6 จะมี รูปแบบการเขียนที่ง่ายขึ้นกว่า ES5 ในปัจจุบัน และยังมีความเป็น Object-Oriented มากขึ้นด้วย

ทีนี้ปัญหาก็คือ Standard ยังไม่สมบูรณ์ Browser ในปัจจุบันนี้เลยยัง support แค่บางส่วน (เราสามารถที่จะติดตามความคืบหน้าของ JavaScript แบบ ES6 ได้ที่นี่) ดังนั้นถ้าเราใจร้อนอยากจะลองใช้ JavaScript แบบใหม่นี้ก็ต้องมีตัวช่วย ซึ่งก็จะเป็น Transpiler (หรือ Transcompiler มาจาก Transform + Compiler เป็นการ Compile จาก Source Code ไปเป็น Source Code)  ตัว Transpile ที่ได้รับความนิยมมากๆ ก็จะมี LiveScript, TypeScript, CofeeScript และ Babel

อีกทางเลือกนึงคือการใช้ Chrome canary ซึ่งเป็น Chrome Version ใหม่ที่ Suppport ES6 มากกว่า Chrome ปกติ (แต่ Chrome canary ยังไม่ Stable เท่ากับ Chrome ที่เราใช้กันอยู่ในปัจจุบัน)

คราวนี้มาทำความรู้จักกับ Babel กันบ้าง ในปัจจุบัน Babel จะเป็น Version 6.x ซึ่งสิ่งที่เปลี่ยนแปลงจาก Version 5 คือ จะไม่สามารถใช้ Babel แบบ in-browser ได้อีกแล้ว (เป็นการให้ Babel แปลง Javascript จาก ES6 เป็น ES5 ในฝัง Client ซึ่งข้อดีคือใช้งานง่ายไม่ต้องติดตั้งโปรแกรมอะไรเลย เพียงแต่เอาไฟล์ Babel.js เข้าไปวางใน Project เหมือนๆกับ JavaScript Library ทั่วๆไป แค่นั้นเอง แต่จะทำงานช้ากว่าการทำ Transpile) การใช้งาน Babel แบบ in-browser นั้นใช้ได้กับ Babel version ก่อน 5.8.x เท่านั้น