หลายๆคนเคยเห็นไฟล์ .browserslistrc วันนี้เรามาทำความรู้จักกัน คือ .browserslistrc
เป็น tool ในการกำหนดว่าโปรเจกต์ของเราจะรองรับเบราว์เซอร์ใดบ้าง โดยเฉพาะใน Angular ที่ใช้เครื่องมือในการ build
และแปลงโค้ดต่าง ๆ ไฟล์นี้จะถูกอ่านและนำไปใช้ในขั้นตอนการ compile
หรือแปลงโค้ดผ่านเครื่องมือที่เกี่ยวข้อง เช่น Autoprefixer และ Babel ซึ่งถูกรวมอยู่ใน Angular CLI เพื่อให้โปรเจกต์รองรับเบราว์เซอร์ที่คุณกำหนด
การทำงานของ .browserslistrc ใน Angular
-
ขั้นตอนการ build โปรเจกต์: เมื่อคุณรันคำสั่ง
ng build
หรือng serve
Angular CLI จะอ่านไฟล์ .browserslistrc เพื่อกำหนดว่าเบราว์เซอร์ใดควรถูกสนับสนุน โดยมีผลในส่วนต่าง ๆ เช่น- Autoprefixer: จะเพิ่ม prefixes สำหรับฟีเจอร์ CSS ที่จำเป็นเพื่อให้รองรับเบราว์เซอร์ที่ระบุ
- Babel: จะทำการแปลงโค้ด JavaScript ให้สามารถทำงานได้ในเบราว์เซอร์ที่ไม่รองรับฟีเจอร์สมัยใหม่
- Polyfills: Angular จะเพิ่ม polyfills ให้กับเบราว์เซอร์ที่ไม่รองรับฟีเจอร์ JavaScript บางตัว
-
การปรับแต่งโค้ดให้เหมาะสม (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 ให้รองรับเบราว์เซอร์ที่คุณระบุไว้ ไฟล์นี้ช่วยให้โค้ดที่พัฒนาขึ้นสามารถทำงานได้อย่างราบรื่นในเบราว์เซอร์หลากหลายรุ่น ลดปัญหาความไม่เข้ากันของโค้ดระหว่างเบราว์เซอร์ต่าง ๆ