Babel 7 มีอะไรใหม่บ้าง
ทุกวันนี้ถ้าเราจะเขียนเว็บด้วย Javascript ก็คงไม่มีใครปฏิเสธตัวช่วยอย่าง Babel กันแล้วล่ะครับ มันคือวุ้นแปลภาษาที่อัพเกรดให้เราสามารถเขียน Syntax ให้สวยงามได้ ลองมาดูกันว่ามีอะไรบ้าง
Class Property
ใน Class เราสามารถประกาศ property หรือ attribute ใน scope ของ class ได้เลย เหมือนกับหลักการใน OOP ของหลายๆภาษา
ตัวนี้จะมากับ @babel/preset-stage-3 ซึ่งเราต้องติดตั้งและเรียกใช้ presets ใน babel config file (มีตัวอย่างตอนท้าย)
Object Rest/Spread
สำหรับการ assign ค่า Object ในรูปแบบ destructuring ก็สามารถเอาค่าที่เหลือไปเก็บในอีกตัวแปรได้แบบนี้
ส่วน spread ก็สามารถทำแบบนี้ได้เลย
Optional Try/Catch
อันนี้ไม่มีอะไรมากมาย แค่ทำให้โค้ดสั้นลงมา 3–4 ตัวแค่นั้นครับ 555 อาจจะทำให้เขียนเร็วขึ้นอีกหน่อยด้วยความสามารถที่ไม่ต้องรับตัวแปรในกรณี catch แล้วเขียนได้เลยแบบนี้ครับ
Unicode Property Regular Expression
ของเวอร์ชันนี้ เราสามารถใช้ tag พิเศษอย่าง \p ได้แล้วซึ่งเราสามารถเลือก set ของ unicode character แบบต่างๆได้ เช่นตัวอย่างนี้ก็คือเช็คในเคสที่เป็นภาษาไทยทั้งหมด
สำหรับรายละเอียดเรื่อง Unicode property สามารถดูเพิ่มเติมได้ที่ ECMAScript Unicode Property escapes
Dynamic Import
เพื่อ code ที่ optimize ดีขึ้น เราสามารถ import module ณ ที่ใดก็ได้ของโค้ด ทำให้เราสามารถกำจัดโค้ดที่ยังไม่จำเป็นต้องใช้เมื่อตอนเริ่มโปรแกรมได้
จะต้องใช้ plugins “babel-plugin-dynamic-import-node” เข้ามาเพิ่มใน babel config
Numeric Separator
ทำให้อ่านตัวเลขที่มีหลักเยอะๆ ง่ายขึ้น ด้วยการแบ่งด้วยเครื่องหมาย _
เจ้าตัวนี้จะติดมากับ presets “@babel/preset-stage-2”
Optional Chaining
เป็นการเช็คค่าใน object ที่ทำให้ชีวิตง่ายขึ้นมาอีกนิดนึง ก่อนหน้านี้เราจะต้องเช็คก่อนว่า object นั้นๆ undefined หรือไม่ แล้วค่อยเช็ค key ที่อยู่ข้างในอีกที
ตอนนี้เราจะใช้ syntax ใหม่กันครับ ซึ่งจะช่วยได้มากในเคสที่ object ซ้อนกันอยู่หลายๆชั้น
จะต้องใช้ plugins “ @babel/plugin-proposal-optional-chaining” ร่วมด้วย
babel เวอร์ชันล่าสุดเค้าก็จะมี signature ตรงชื่อ package จะนำด้วย @babel/… แต่ทว่าตอนนี้ยังเป็นเพียงแค่ beta อยู่ ในเร็วๆนี้น่าจะมีการปรับเปลี่ยนให้ทุกอย่างง่ายขึ้นกว่านี้ ก็ต้องรอติดตามชมกันต่อไป
สุดท้ายนี้ก็ขอฝากไว้ในอ้อมอกอ้อมใจ กับตัวอย่างการ setup babel กับการใช้งานแต่ละ feature ที่เพิ่งกล่าวไปเพื่อความกระจ่างชัดเจนยิ่งขึ้นนะครับ
