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