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/.