การสร้างเว็บไซต์ที่ทำงานได้ดีในเบราว์เซอร์หลักๆ ทั้งหมดเป็นหลักการสำคัญในระบบนิเวศเว็บแบบเปิด อย่างไรก็ตาม การดำเนินการนี้หมายความว่าคุณจะต้องทํางานเพิ่มเติมเพื่อให้แน่ใจว่าเบราว์เซอร์แต่ละรายการที่คุณวางแผนจะกําหนดเป้าหมายรองรับโค้ดทั้งหมดที่คุณเขียน หากต้องการใช้ฟีเจอร์ภาษา JavaScript ใหม่ คุณจะต้องเปลี่ยนรูปแบบฟีเจอร์เหล่านี้ให้เป็นรูปแบบที่เข้ากันได้แบบย้อนหลังสำหรับเบราว์เซอร์ที่ยังไม่รองรับฟีเจอร์ดังกล่าว
Babel เป็นเครื่องมือที่ใช้กันอย่างแพร่หลายที่สุดในการคอมไพล์โค้ดที่มีไวยากรณ์ใหม่เป็นโค้ดที่เบราว์เซอร์และสภาพแวดล้อมต่างๆ (เช่น Node) เข้าใจได้ คู่มือนี้จะถือว่าคุณใช้ Babel คุณจึงต้องทําตามวิธีการตั้งค่าเพื่อรวม Babel ไว้ในแอปพลิเคชัน หากยังไม่ได้ทํา เลือก webpack ใน Build Systems หากคุณใช้ Webpack เป็น Bundler ของโมดูลในแอป
หากต้องการใช้ Babel เพื่อแปลงเฉพาะสิ่งที่จําเป็นสําหรับผู้ใช้ คุณต้องทำดังนี้
- ระบุเบราว์เซอร์ที่ต้องการกําหนดเป้าหมาย
- ใช้
@babel/preset-envกับเป้าหมายเบราว์เซอร์ที่เหมาะสม - ใช้
<script type="module">เพื่อหยุดการส่งโค้ดที่แปลงแล้วไปยังเบราว์เซอร์ที่ไม่จําเป็นต้องใช้
ระบุเบราว์เซอร์ที่ต้องการกําหนดเป้าหมาย
ก่อนเริ่มแก้ไขวิธีแปลงโค้ดในแอปพลิเคชัน คุณต้องระบุเบราว์เซอร์ที่เข้าถึงแอปพลิเคชัน วิเคราะห์เบราว์เซอร์ ที่ผู้ใช้ของคุณใช้อยู่ รวมถึงเบราว์เซอร์ที่คุณวางแผนจะกำหนดเป้าหมาย เพื่อประกอบการตัดสินใจ
ใช้ @babel/preset-env
โดยปกติแล้ว การแปลงโค้ดจะส่งผลให้ไฟล์มีขนาดใหญ่กว่ารูปแบบเดิม การลดจำนวนการคอมไพล์จะช่วยลดขนาด Bundle เพื่อปรับปรุงประสิทธิภาพของหน้าเว็บ
Babel มีค่าที่กำหนดล่วงหน้าจำนวนหนึ่งซึ่งรวมปลั๊กอินไว้ด้วยกันแทนที่จะรวมเฉพาะปลั๊กอินที่คุณต้องการใช้เพื่อคอมไพล์ฟีเจอร์ภาษาบางอย่าง ใช้ @babel/preset-env เพื่อรวมเฉพาะทรานส์ฟอร์มและโพลีฟีลที่จำเป็นสำหรับเบราว์เซอร์ที่วางแผนจะกำหนดเป้าหมาย
รวม @babel/preset-env ภายในอาร์เรย์ presets ในไฟล์การกำหนดค่า Babel ดังนี้ .babelrc
{
"presets": [
[
"@babel/preset-env",
{
"targets": ">0.25%"
}
]
]
}
ใช้ช่อง targets เพื่อระบุเวอร์ชันของเบราว์เซอร์ที่ต้องการรวมไว้โดยเพิ่มคำค้นหาที่เหมาะสมลงในช่อง browsers @babel/preset-env
ผสานรวมกับ browserslist ซึ่งเป็นการกำหนดค่าแบบโอเพนซอร์สที่แชร์กันระหว่างเครื่องมือต่างๆ สําหรับการกำหนดเป้าหมายเบราว์เซอร์ คุณสามารถดูรายการคำค้นหาทั้งหมดที่เข้ากันได้อยู่ในเอกสารประกอบเกี่ยวกับรายการเบราว์เซอร์
อีกทางเลือกหนึ่งคือการใช้ไฟล์ .browserslistrc เพื่อแสดงรายการสภาพแวดล้อมที่ต้องการกําหนดเป้าหมาย
ค่า ">0.25%" บอกให้ Babel รวมเฉพาะการเปลี่ยนรูปแบบที่จําเป็นเพื่อรองรับเบราว์เซอร์ที่มีการใช้งานมากกว่า 0.25% ทั่วโลก วิธีนี้ช่วยให้มั่นใจว่ากลุ่มของคุณจะไม่มีโค้ดที่แปลงที่ไม่จำเป็นสําหรับเบราว์เซอร์ที่ผู้ใช้ส่วนน้อยมากใช้
ในกรณีส่วนใหญ่ วิธีนี้ดีกว่าการใช้การกำหนดค่าต่อไปนี้
"targets": "last 2 versions"
ค่า "last 2 versions" จะแปลงโค้ดของคุณสําหรับ2 เวอร์ชันล่าสุดของเบราว์เซอร์ทุกรุ่น ซึ่งหมายความว่ามีการรองรับเบราว์เซอร์ที่หยุดให้บริการแล้ว เช่น Internet Explorer
ซึ่งอาจทำให้ขนาดของกลุ่มเพิ่มขึ้นโดยไม่จำเป็นหากคุณไม่คาดว่าจะมีการใช้เบราว์เซอร์เหล่านี้เพื่อเข้าถึงแอปพลิเคชัน
ท้ายที่สุด คุณควรเลือกชุดคําค้นหาที่เหมาะสมเพื่อกําหนดเป้าหมายเบราว์เซอร์ที่ตรงกับความต้องการของคุณเท่านั้น
เปิดใช้การแก้ไขข้อบกพร่องสมัยใหม่
@babel/preset-env จะจัดกลุ่มฟีเจอร์ไวยากรณ์ JavaScript หลายรายการไว้เป็นคอลเล็กชัน และเปิด/ปิดใช้ตามเบราว์เซอร์เป้าหมายที่ระบุ แม้ว่าวิธีนี้จะได้ผลดี แต่คอลเล็กชันฟีเจอร์ไวยากรณ์ทั้งหมดจะเปลี่ยนรูปแบบเมื่อเบราว์เซอร์เป้าหมายมีข้อบกพร่องเพียงฟีเจอร์เดียว
ซึ่งมักส่งผลให้มีโค้ดที่แปลงแล้วมากกว่าที่จำเป็น
เดิมทีเราพัฒนาเป็นค่าที่กำหนดล่วงหน้าแยกต่างหาก ตัวเลือกแก้ไขข้อบกพร่องใน @babel/preset-env แก้ปัญหานี้ด้วยการแปลงไวยากรณ์สมัยใหม่ที่เสียหายในบางเบราว์เซอร์ให้เป็นไวยากรณ์ที่ใกล้เคียงที่สุดซึ่งไม่เสียในเบราว์เซอร์เหล่านั้น ผลที่ได้คือโค้ดที่ทันสมัยซึ่งแทบจะเหมือนกันทุกประการ โดยมีการปรับไวยากรณ์เล็กน้อยเพื่อรับประกันความเข้ากันได้ในทุกเบราว์เซอร์เป้าหมาย หากต้องการใช้การเพิ่มประสิทธิภาพนี้ ให้ตรวจสอบว่าคุณได้ติดตั้ง @babel/preset-env 7.10 ขึ้นไปแล้ว จากนั้นตั้งค่าพร็อพเพอร์ตี้ bugfixes เป็น true
{
"presets": [
[
"@babel/preset-env",
{
"bugfixes": true
}
]
]
}
ใน Babel 8 ตัวเลือก bugfixes จะเปิดใช้โดยค่าเริ่มต้น
ใช้ <script type="module">
โมดูล JavaScript หรือโมดูล ES เป็นฟีเจอร์ใหม่ที่ค่อนข้างใหม่ที่รองรับในเบราว์เซอร์หลักๆ ทั้งหมด คุณใช้โมดูลเพื่อสร้างสคริปต์ที่นำเข้าและส่งออกจากโมดูลอื่นได้ แต่ก็ยังใช้โมดูลดังกล่าวกับ @babel/preset-env เพื่อกำหนดเป้าหมายเฉพาะเบราว์เซอร์ที่รองรับได้อีกด้วย
แทนที่จะค้นหาเวอร์ชันเบราว์เซอร์หรือส่วนแบ่งการตลาดที่เฉพาะเจาะจง ให้ลองระบุ "esmodules" : true ในช่อง targets ของไฟล์ .babelrc
{
"presets":[
[
"@babel/preset-env",
{
"targets":{
"esmodules": true
}
}
]
]
}
ฟีเจอร์ ECMAScript ใหม่จำนวนมากที่คอมไพล์ด้วย Babel นั้นรองรับอยู่แล้วในสภาพแวดล้อมที่รองรับโมดูล JavaScript ด้วยเหตุนี้ คุณจึงลดความซับซ้อนของกระบวนการตรวจสอบว่าจะมีการใช้เฉพาะโค้ดที่เปลี่ยนรูปแบบแล้วสำหรับเบราว์เซอร์ที่ต้องการโค้ดนั้นจริงๆ
เบราว์เซอร์ที่รองรับโมดูลจะไม่สนใจสคริปต์ที่มีแอตทริบิวต์ nomodule
ในทางกลับกัน เบราว์เซอร์ที่ไม่รองรับโมดูลจะไม่สนใจองค์ประกอบสคริปต์ที่มี type="module" ซึ่งหมายความว่าคุณสามารถรวมโมดูลและคำอธิบายสำรองที่คอมไพล์ไว้ได้
โดยควรรวมสคริปต์เวอร์ชัน 2 รายการของแอปพลิเคชันไว้ดังนี้
<script type="module" src="main.mjs"></script>
<script nomodule src="compiled.js" defer></script>
เบราว์เซอร์ที่รองรับโมดูลจะดึงข้อมูลและเรียกใช้ main.mjs และละเว้น compiled.js
เบราว์เซอร์ที่ไม่รองรับโมดูลจะทำหน้าที่ตรงกันข้าม
หากใช้ webpack คุณสามารถกำหนดเป้าหมายที่แตกต่างกันในการกำหนดค่าสำหรับแอปพลิเคชัน 2 เวอร์ชันแยกกันได้ ดังนี้
- เวอร์ชันสำหรับเบราว์เซอร์ที่รองรับโมดูลเท่านั้น
- เวอร์ชันที่มีสคริปต์ที่คอมไพล์ซึ่งทำงานได้ในเบราว์เซอร์เดิมทุกชนิด ซึ่งจะมีขนาดใหญ่กว่า เนื่องจากต้องรองรับเบราว์เซอร์ที่หลากหลายมากขึ้น
ขอขอบคุณ Connor Clark และ Jason Miller สำหรับรีวิว