การสร้างเว็บไซต์ที่ทำงานได้ดีในเบราว์เซอร์หลักๆ ทั้งหมดเป็นหลักการสำคัญในระบบนิเวศเว็บแบบเปิด อย่างไรก็ตาม วิธีนี้หมายความว่าคุณจะต้องทํางานเพิ่มเติมเพื่อตรวจสอบว่าเบราว์เซอร์แต่ละรายการที่คุณวางแผนจะกําหนดเป้าหมายรองรับโค้ดทั้งหมดที่คุณเขียน หากต้องการใช้ฟีเจอร์ภาษา JavaScript ใหม่ คุณต้องแปลงฟีเจอร์เหล่านี้เป็นรูปแบบที่เข้ากันได้แบบย้อนหลังสําหรับเบราว์เซอร์ที่ยังไม่รองรับ
Babel เป็นเครื่องมือที่ใช้กันอย่างแพร่หลายที่สุดในการคอมไพล์โค้ดที่มีไวยากรณ์ใหม่เป็นโค้ดที่เบราว์เซอร์และสภาพแวดล้อมต่างๆ (เช่น Node) เข้าใจได้ คู่มือนี้ถือว่าคุณใช้ Babel ดังนั้นคุณต้องทําตามวิธีการตั้งค่าเพื่อรวม Babel ไว้ในแอปพลิเคชัน หากยังไม่ได้ทํา เลือก webpack
ใน Build Systems หากคุณใช้ webpack เป็นเครื่องมือรวมโมดูลในแอป
หากต้องการใช้ 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 ซึ่งเป็นการกำหนดค่าแบบโอเพนซอร์สที่แชร์กันระหว่างเครื่องมือต่างๆ สําหรับการกำหนดเป้าหมายเบราว์เซอร์ ดูรายการคำค้นหาทั้งหมดที่เข้ากันได้ได้ในเอกสารประกอบ 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 สำหรับรีวิว