Angular 使用 Browserslist 處理瀏覽器相容性問題

發表於 更新於 Disqus：

Angular 瀏覽器相容性設定

Angular 官方文件有這一段說明 Configuring browser compatibility 。

其實大家都看過，但是很少人會留意，到底自身的專案應該要怎麼設定會比較好，

假設 .browserslistrc 設定如下：

1
2
3
4
5
6
7
>0.3%, 
last 1 Chrome version, 
last 1 Firefox version, 
last 2 Edge major versions, 
last 3 Safari major versions,
last 2 iOS major versions, 
not dead

Browserslist 有提供線上工具 https://browsersl.ist/ 可以輸入設定後，查看各瀏覽器相容的狀況。

angular-browserlist

即使我們早就曉得專案可以透過 .browserslistrc 進行設定，但還是經常會被客戶使用比較舊的裝置而遇到bug的狀況。

照上述的設定來看，手機裝置 Chrome for Android 支援程度是 109 版本以上，但客戶目前其實還有在使用 Android 9 進行瀏覽網頁還是大有人在，因此如果工程師有使用到 globalThis 這樣子的全域變數，往往不自覺就造成線上問題了。

所以，在開出新專案時，可以改用年份取代裝置版本，舉例：

1
since 2018-01, not dead

“since 2018-01”:
這部分指定專案要支援的瀏覽器的最早版本從 2018 年 1 月開始的瀏覽器版本。你的前端代碼將為 2018 年 1 月或之後版本的瀏覽器進行優化和支援。

“not dead”:
代表不需要支援已經被廢棄瀏覽器版本，例如 IEMustDie XD。

總而言之，當遇到語法相容性問題十，除了找尋對應的 polyfills 外，也許可以檢查一下 angular 專案裡的 .browserslistrc 這隻檔案，也許調整這邊的內容，會比加入不同功能的 polyfills 設定來得方便。