การสร้างเว็บไซต์ที่ทำงานได้ดีในเบราว์เซอร์หลักๆ ทั้งหมดเป็นหลักการสำคัญของระบบนิเวศของเว็บแบบเปิด อย่างไรก็ตาม การทำเช่นนี้หมายความว่าคุณจะต้องทำงานเพิ่มเติมเพื่อให้แน่ใจว่าโค้ดทั้งหมดที่คุณเขียนจะได้รับการรองรับในแต่ละเบราว์เซอร์ที่คุณวางแผนจะกำหนดเป้าหมาย หากต้องการใช้ฟีเจอร์ภาษา JavaScript ใหม่ คุณต้องทำการ Transpile ฟีเจอร์เหล่านี้เป็นรูปแบบที่เข้ากันได้แบบย้อนหลังสำหรับเบราว์เซอร์ที่ไม่รองรับ
Babel เป็นเครื่องมือที่ใช้กันอย่างแพร่หลายมากที่สุดในการคอมไพล์โค้ด
ที่มีไวยากรณ์ใหม่กว่าให้เป็นโค้ดที่เบราว์เซอร์และสภาพแวดล้อมต่างๆ
(เช่น Node) สามารถเข้าใจได้ คู่มือนี้ถือว่าคุณใช้ Babel ดังนั้นคุณ
ต้องทำตามวิธีการตั้งค่าเพื่อ
รวมไว้ในแอปพลิเคชันหากยังไม่ได้ดำเนินการ เลือก webpack
ใน Build Systems หากคุณใช้ webpack เป็นเครื่องมือรวมโมดูลในแอป
หากต้องการใช้ Babel เพื่อทำการ Transpile เฉพาะสิ่งที่จำเป็นสำหรับผู้ใช้ คุณต้องทำดังนี้
- ระบุเบราว์เซอร์ที่ต้องการกำหนดเป้าหมาย
- ใช้
@babel/preset-envกับเป้าหมายเบราว์เซอร์ที่เหมาะสม - ใช้
<script type="module">เพื่อหยุดส่งโค้ดที่แปลงแล้วไปยังเบราว์เซอร์ที่ไม่จำเป็นต้องใช้
ระบุเบราว์เซอร์ที่ต้องการกำหนดเป้าหมาย
ก่อนที่จะเริ่มแก้ไขวิธีที่โค้ดในแอปพลิเคชันของคุณได้รับการแปลง คุณต้องระบุเบราว์เซอร์ที่เข้าถึงแอปพลิเคชันของคุณ วิเคราะห์เบราว์เซอร์ที่ผู้ใช้ใช้และเบราว์เซอร์ที่คุณวางแผนจะกำหนดเป้าหมายเพื่อประกอบการตัดสินใจ
ใช้ @babel/preset-env
โดยปกติแล้วการแปลงโค้ดจะส่งผลให้ไฟล์มีขนาดใหญ่กว่า รูปแบบเดิม การลดปริมาณการคอมไพล์จะช่วยลดขนาดของ Bundle เพื่อปรับปรุงประสิทธิภาพของหน้าเว็บได้
Babel มีค่าที่กำหนดล่วงหน้าหลายรายการที่รวมปลั๊กอินไว้ด้วยกันแทนที่จะรวมปลั๊กอินที่เฉพาะเจาะจงเพื่อคอมไพล์ฟีเจอร์ภาษาบางอย่างที่คุณใช้ ใช้ @babel/preset-env เพื่อรวมเฉพาะการแปลงและ Polyfill ที่จำเป็นสำหรับเบราว์เซอร์ที่คุณวางแผนจะ กำหนดเป้าหมาย
รวม @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% ของการใช้งานทั่วโลก
วิธีนี้ช่วยให้มั่นใจได้ว่า Bundle จะไม่มีโค้ดที่แปลงแล้วโดยไม่จำเป็นสำหรับเบราว์เซอร์ที่ผู้ใช้ส่วนน้อยมากใช้
ในกรณีส่วนใหญ่ วิธีนี้ดีกว่าการใช้การกำหนดค่าต่อไปนี้
"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 สำหรับรีวิว