การทำงานของไฟล์ .browserslistrc ใน Angular

หลายๆคนเคยเห็นไฟล์ .browserslistrc วันนี้เรามาทำความรู้จักกัน คือ .browserslistrc เป็น tool ในการกำหนดว่าโปรเจกต์ของเราจะรองรับเบราว์เซอร์ใดบ้าง โดยเฉพาะใน Angular ที่ใช้เครื่องมือในการ build และแปลงโค้ดต่าง ๆ ไฟล์นี้จะถูกอ่านและนำไปใช้ในขั้นตอนการ compile หรือแปลงโค้ดผ่านเครื่องมือที่เกี่ยวข้อง เช่น Autoprefixer และ Babel ซึ่งถูกรวมอยู่ใน Angular CLI เพื่อให้โปรเจกต์รองรับเบราว์เซอร์ที่คุณกำหนด

การทำงานของ .browserslistrc ใน Angular

1. ขั้นตอนการ build โปรเจกต์: เมื่อคุณรันคำสั่ง ng build หรือ ng serve Angular CLI จะอ่านไฟล์ .browserslistrc เพื่อกำหนดว่าเบราว์เซอร์ใดควรถูกสนับสนุน โดยมีผลในส่วนต่าง ๆ เช่น

   • Autoprefixer: จะเพิ่ม prefixes สำหรับฟีเจอร์ CSS ที่จำเป็นเพื่อให้รองรับเบราว์เซอร์ที่ระบุ
   • Babel: จะทำการแปลงโค้ด JavaScript ให้สามารถทำงานได้ในเบราว์เซอร์ที่ไม่รองรับฟีเจอร์สมัยใหม่
   • Polyfills: Angular จะเพิ่ม polyfills ให้กับเบราว์เซอร์ที่ไม่รองรับฟีเจอร์ JavaScript บางตัว

2. การปรับแต่งโค้ดให้เหมาะสม (Optimize): Angular จะใช้ข้อมูลจากไฟล์ .browserslistrc เพื่อทำให้การบันเดิล (bundle) โค้ดมีประสิทธิภาพมากขึ้น โดยจะเพิ่มโค้ดที่จำเป็นสำหรับเบราว์เซอร์เก่า และลดขนาดโค้ดสำหรับเบราว์เซอร์ที่ใหม่กว่า

ตัวอย่างการใช้งานไฟล์ .browserslistrc

ตัวอย่างคำสั่งในไฟล์ .browserslistrc

#.browserslistrc
last 2 versions
Firefox 85
Chrome 118
Edge 118

คำสั่งเหล่านี้มีความหมายว่า

• last 2 versions: รองรับเบราว์เซอร์ทุกรุ่นที่อัปเดตล่าสุด 2 เวอร์ชัน ซึ่งครอบคลุมหลายเบราว์เซอร์หลัก เช่น Firefox, Chrome, Edge และ Safari
• Firefox 85: รองรับ Firefox เวอร์ชัน 85 โดยเฉพาะ
• Chrome 118: รองรับ Chrome เวอร์ชัน 118 โดยเฉพาะ
• Edge 118: รองรับ Microsoft Edge เวอร์ชัน 118 โดยเฉพาะ

สรุป

ในโปรเจกต์ Angular ไฟล์ .browserslistrc ทำงานในขั้นตอนการ build โดย Angular CLI จะใช้ข้อมูลจากไฟล์นี้เพื่อปรับแต่งโค้ด JavaScript และ CSS ให้รองรับเบราว์เซอร์ที่คุณระบุไว้ ไฟล์นี้ช่วยให้โค้ดที่พัฒนาขึ้นสามารถทำงานได้อย่างราบรื่นในเบราว์เซอร์หลากหลายรุ่น ลดปัญหาความไม่เข้ากันของโค้ดระหว่างเบราว์เซอร์ต่าง ๆ