BabelJS - ภาพรวม

BabelJSเป็นตัวส่งสัญญาณ JavaScript ที่ถ่ายทอดคุณลักษณะใหม่ ๆ ให้เป็นมาตรฐานเดิม ด้วยคุณสมบัตินี้จึงสามารถใช้งานได้ทั้งบนเบราว์เซอร์เก่าและใหม่โดยไม่ยุ่งยาก นักพัฒนาชาวออสเตรเลีย Sebastian McKenzie เริ่ม BabelJS

ทำไมต้อง BabelJS?

JavaScript เป็นภาษาที่เบราว์เซอร์เข้าใจ เราใช้เบราว์เซอร์ที่แตกต่างกันเพื่อเรียกใช้แอปพลิเคชันของเราเช่น Chrome, Firefox, Internet Explorer, Microsoft Edge, Opera, UC browser เป็นต้น ECMA Script คือข้อกำหนดของภาษา JavaScript ECMA Script 2015 ES6 เป็นเวอร์ชันเสถียรซึ่งทำงานได้ดีในเบราว์เซอร์ใหม่และเก่าทั้งหมด

หลังจาก ES5 เรามี ES6, ES7 และ ES8 ES6 เปิดตัวพร้อมคุณสมบัติใหม่มากมายซึ่งเบราว์เซอร์ทั้งหมดไม่รองรับอย่างสมบูรณ์ เช่นเดียวกับ ES7, ES8 และ ESNext (เวอร์ชันถัดไปของ ECMA Script) ตอนนี้ยังไม่แน่นอนว่าจะเป็นไปได้เมื่อใดที่เบราว์เซอร์ทั้งหมดจะเข้ากันได้กับ ES เวอร์ชันทั้งหมดที่เปิดตัว

ในกรณีที่เราวางแผนที่จะใช้คุณสมบัติ ES6 หรือ ES7 หรือ ES8 ในการเขียนโค้ดของเรามันจะมีแนวโน้มที่จะพังในเบราว์เซอร์เก่าบางตัวเนื่องจากขาดการสนับสนุนการเปลี่ยนแปลงใหม่ ดังนั้นหากเราต้องการใช้คุณลักษณะใหม่ของ ECMA Script ในโค้ดของเราและต้องการเรียกใช้งานบนเบราว์เซอร์ทั้งหมดที่มีเราจำเป็นต้องมีเครื่องมือที่จะรวบรวมโค้ดสุดท้ายของเราใน ES5

Babelทำเช่นเดียวกันและเรียกว่าทรานสไพเลอร์ที่ถ่ายทอดรหัสในเวอร์ชันสคริปต์ ECMA ที่เราต้องการ มีคุณสมบัติเช่นค่าที่ตั้งไว้ล่วงหน้าและปลั๊กอินซึ่งกำหนดค่าเวอร์ชัน ECMA ที่เราต้องการเพื่อถ่ายทอดรหัสของเรา ด้วย Babel นักพัฒนาสามารถเขียนโค้ดของตนโดยใช้คุณสมบัติใหม่ใน JavaScript ผู้ใช้สามารถรับรหัสที่ปรากฏโดยใช้ Babel; รหัสสามารถใช้ในเบราว์เซอร์ใดก็ได้ในภายหลังโดยไม่มีปัญหาใด ๆ

The following table lists down the features available in ES6, ES7 and ES8 −

คุณสมบัติ	เวอร์ชันสคริปต์ ECMA
Let + Const	ES6
ฟังก์ชั่นลูกศร	ES6
ชั้นเรียน	ES6
สัญญา	ES6
เครื่องกำเนิดไฟฟ้า	ES6
ตัวทำซ้ำ	ES6
โมดูล	ES6
การทำลายล้าง	ES6
แม่แบบตัวอักษร	ES6
วัตถุที่ปรับปรุงแล้ว	ES6
ค่าเริ่มต้นพักผ่อนและแพร่กระจายคุณสมบัติ	ES6
Async - รอ	ES7
ตัวดำเนินการยกกำลัง	ES7
Array.prototype.includes ()	ES7
ช่องว่างสตริง	ES8

BabelJS จัดการสองส่วนต่อไปนี้ -

• transpiling
• polyfilling

Babel-Transpiler คืออะไร?

Babel-Transpiler แปลงไวยากรณ์ของ JavaScript สมัยใหม่ให้อยู่ในรูปแบบซึ่งเบราว์เซอร์รุ่นเก่าสามารถเข้าใจได้ง่าย ตัวอย่างเช่นฟังก์ชันลูกศร const ให้คลาสจะถูกแปลงเป็นฟังก์ชัน var ฯลฯ ในที่นี้ไวยากรณ์คือฟังก์ชันลูกศรจะถูกแปลงเป็นฟังก์ชันปกติโดยให้ฟังก์ชันการทำงานเหมือนกันในทั้งสองกรณี

Babel-polyfill คืออะไร?

มีการเพิ่มคุณสมบัติใหม่ใน JavaScript เช่นสัญญาแผนที่และรวมถึง คุณสมบัติสามารถใช้กับอาร์เรย์ เช่นเดียวกันเมื่อใช้และถ่ายทอดโดยใช้ babel จะไม่ถูกแปลง ในกรณีที่คุณลักษณะใหม่เป็นวิธีการหรือวัตถุเราจำเป็นต้องใช้ Babel-polyfill ร่วมกับการเลื่อนเพื่อให้สามารถใช้งานได้กับเบราว์เซอร์รุ่นเก่า

นี่คือรายการคุณสมบัติของ ECMA Script ที่มีอยู่ใน JavaScript ซึ่งสามารถถ่ายทอดและเติมเต็มได้ -

• Classes
• Decorators
• Const
• Modules
• Destructing
• พารามิเตอร์เริ่มต้น
• ชื่อคุณสมบัติที่คำนวณ
• ส่วนที่เหลือ / การแพร่กระจายของวัตถุ
• ฟังก์ชัน Async
• ฟังก์ชันลูกศร
• พารามิเตอร์ที่เหลือ
• Spread
• แม่แบบตัวอักษร

ECMA Script features that can be polyfilled −

• Promises
• Map
• Set
• Symbol
• Weakmap
• Weakset
• includess
• Array.from, Array.of, Array # find, Array.buffer, Array # findIndex
• Object.assign,Object.entries,Object.values

คุณสมบัติของ BabelJS

ในส่วนนี้เราจะเรียนรู้เกี่ยวกับคุณสมบัติต่างๆของ BabelJS ต่อไปนี้เป็นคุณสมบัติหลักที่สำคัญที่สุดของ BabelJS -

Babel-Plugins

ปลั๊กอินและค่าที่ตั้งล่วงหน้าเป็นรายละเอียดการกำหนดค่าสำหรับ Babel เพื่อถ่ายทอดรหัส Babel รองรับปลั๊กอินจำนวนมากซึ่งสามารถใช้แยกกันได้หากเราทราบสภาพแวดล้อมที่โค้ดจะทำงาน

Babel-Presets

การตั้งค่าล่วงหน้าของ Babel คือชุดของปลั๊กอินกล่าวคือรายละเอียดการกำหนดค่าไปยัง Babel-Transpiler ที่สั่งให้ Babel ถ่ายทอดในโหมดเฉพาะ เราจำเป็นต้องใช้ค่าที่ตั้งไว้ล่วงหน้าซึ่งมีสภาพแวดล้อมที่เราต้องการแปลงรหัส ยกตัวอย่างเช่นes2015ที่ตั้งไว้จะแปลงรหัสเพื่อES5

Babel-Polyfills

มีคุณสมบัติบางอย่างเช่นวิธีการและวัตถุซึ่งไม่สามารถถ่ายทอดได้ ในกรณีเช่นนี้เราสามารถใช้ babel-polyfill เพื่ออำนวยความสะดวกในการใช้คุณสมบัติในเบราว์เซอร์ใดก็ได้ ขอให้เราพิจารณาตัวอย่างของคำสัญญา; เพื่อให้คุณลักษณะนี้ทำงานในเบราว์เซอร์รุ่นเก่าเราจำเป็นต้องใช้ polyfills

Babel-Polyfills

Babel-cli มาพร้อมกับคำสั่งมากมายที่สามารถรวบรวมรหัสได้อย่างง่ายดายบนบรรทัดคำสั่ง นอกจากนี้ยังมีคุณสมบัติเช่นปลั๊กอินและพรีเซ็ตที่จะใช้ร่วมกับคำสั่งทำให้ง่ายต่อการโอนรหัสในคราวเดียว

ข้อดีของการใช้ BabelJS

ในส่วนนี้เราจะเรียนรู้เกี่ยวกับข้อดีต่างๆที่เกี่ยวข้องกับการใช้ BabelJS -

• BabelJS ให้ความเข้ากันได้ย้อนหลังกับคุณสมบัติที่เพิ่มใหม่ทั้งหมดให้กับ JavaScript และสามารถใช้ในเบราว์เซอร์ใดก็ได้

• BabelJS มีความสามารถในการ Transpile เพื่อใช้ JavaScript เวอร์ชันถัดไป - ES6, ES7, ESNext เป็นต้น

• BabelJS สามารถใช้ร่วมกับ gulp, webpack, flow, react, typescript ฯลฯ ทำให้มีประสิทธิภาพมากและสามารถใช้กับโปรเจ็กต์ขนาดใหญ่ทำให้ชีวิตของนักพัฒนาเป็นเรื่องง่าย

• BabelJS ยังทำงานร่วมกับ react JSX syntax และสามารถคอมไพล์ในรูปแบบ JSX

• BabelJS รองรับ Plugins, polyfills, babel-cli ที่ทำให้ง่ายต่อการทำงานกับโปรเจ็กต์ใหญ่ ๆ

ข้อเสียของการใช้ BabelJS

ในส่วนนี้เราจะเรียนรู้เกี่ยวกับข้อเสียต่างๆของการใช้ BabelJS -

• โค้ด BabelJS จะเปลี่ยนไวยากรณ์ในขณะที่ทำให้เกิดการถ่ายเทซึ่งทำให้เข้าใจรหัสได้ยากเมื่อนำออกใช้ในการผลิต

• รหัสที่ขนส่งมีขนาดมากกว่าเมื่อเทียบกับรหัสเดิม

• ไม่ใช่ ES6 / 7/8 ทั้งหมดหรือคุณสมบัติใหม่ที่กำลังจะเกิดขึ้นและเราต้องใช้ polyfill เพื่อให้สามารถทำงานบนเบราว์เซอร์รุ่นเก่าได้

นี่คือเว็บไซต์อย่างเป็นทางการของ babeljs https://babeljs.io/.