The Will Will Web

記載著 Will 在網路世界的學習心得與技術分享

如何讓 Angular CLI v8+ 建置專案時可以不要輸出 ES5 版本 (browserslist)

📅 2019/11/06 03:20 📁 Angular

Angular CLI 從 v8 版本開始，就支援一個「差異化載入」(Differential Loading) 功能，此功能會自動判斷當今世上所有主流瀏覽器中，是否支援 ES5 或 ES2015 (ES6) 語法。如果這些瀏覽器還有不支援 ES2015 的版本尚在市場上流通的話，Angular CLI 在執行 ng build --prod 的時候，就會建置出分別為 ES5 與 ES2015 兩個版本，並透過 nomodule 屬性達成差異化載入。想當然爾，如果一次建置兩個版本，總體建置時間也會倍增。本篇文章我將解釋這部分技術細節，如果你只想建置出 ES2015 的版本，也請繼續看下去。

關於 browserslist 設定檔

在 Angular CLI v7 以前，在 angular.json 中有個設定參數為 es5BrowserSupport，這個設定可以告訴 Angular CLI 在建置專案時，其輸出的 JS 語法是否要支援 ES5 版本，但是這個設定到了 Angular CLI v8 就不再適用，建議未來也不要再用這條設定。

從 Angular CLI v8 開始，關於建置輸出的 JS 版本，統一由 browserslist 設定檔負責，該檔案的詳細說明可以參考 Browserslist 專案。

這個 browserslist 設定檔，主要用來定義當前應用程式應該支援的瀏覽器種類與版本，他有一套相當便利的查詢語法，可以幫助你用比較通用的方式定義瀏覽器。

解說 browserslist 設定檔預設內容

我們先來看看 Angular CLI v8 內建的 browserslist 設定檔內容：

> 0.5%
last 2 versions
Firefox ESR
not dead
not IE 9-11 # For IE 9-11 support, remove 'not'.

這些設定大致上的意思是這樣的：

  1. > 0.5%: 依據瀏覽器全球統計數據，支援大於 0.5% 市佔率的瀏覽器。
  2. last 2 versions: 支援每個瀏覽器的最新兩個版本
  3. Firefox ESR: 支援 Firefox ESR 版本
  4. dead 是指已經不被官方所支援的瀏覽器版本 (例如: IE10, IE Mobile 10, BlackBerry 10, ...)，或是距離上次更新已經超過 24 個月的版本。而 not dead 就是指這些舊版瀏覽器皆不支援。
  5. not IE 9-11: 代表不支援 IE 9-11 版本！

請注意：越下方的設定，會覆寫越上面所寫的瀏覽器查詢規則。

其實 browserslist 設定檔內容還算淺顯易懂，但要知道確切支援了哪些瀏覽器，則可以透過以下命令進行查詢：

npx browserslist

Angular CLI v8 預設 browserslist 的執行結果為：

and_chr 75
and_ff 67
and_qq 1.2
and_uc 12.12
android 67
baidu 7.12
chrome 75
chrome 74
chrome 73
edge 18
edge 17
firefox 68
firefox 67
firefox 60
ie_mob 11
ios_saf 12.2-12.3
ios_saf 12.0-12.1
ios_saf 11.3-11.4
kaios 2.5
op_mini all
op_mob 46
opera 62
opera 60
safari 12.1
safari 12
samsung 9.2
samsung 8.2

你可以從上述清單中發現幾個亮點：

  1. 完全不支援 IE，連 IE11 都沒有在裡面。
  2. 他竟然支援 Opera Mini 所有版本，這個版本完全不支援 ES2015 語法。至於這個瀏覽器還支援的原因也很神奇，因為他的全球市佔率至今還有 1.3%，即便連台灣也還有 0.68% 的市佔率。瀏覽器市占比例可以參考 "Can I use" usage table 資料，台灣這邊的市佔率也可以參考 Can I use - JavaScript modules via script tag 上面的資訊！
  3. 還有 and_uc 12.12 (UC Browser for Android)、baidu 7.12 (Baidu Browser) 與 and_qq 1.2 (QQ Browser) 都是不支援 ES2015 的瀏覽器。說實在的，我並不清楚為何這些瀏覽器還會出現在支援清單上，可能是某地區的市佔率還挺高吧。

也因為要支援這些瀏覽器的關係，因此 Angular CLI v8 在對專案進行 ng build --prod 的時候，便會同時輸出 ES5 與 ES2015 版本。

調整 browserslist 讓 Angular CLI 輸出只有 ES2015 的版本

如果想要達成只建置輸出 ES2015 版本，你可以明確指定你想支援的瀏覽器版本，如下範例：

Chrome >= 61
Firefox >= 60
Safari >= 11
Opera >= 48
Edge >= 16
Samsung >= 8
Android >= 67
ChromeAndroid >= 74
FirefoxAndroid >= 66

你可以參考 Can I use 網站的資訊進行調整。當然，如果有真的有使用者使用了不支援 ES2015 的瀏覽器，其風險你就要自行承擔了。

我想要支援 IE9-11 怎麼辦

由於 IE11 並不支援大部分 ES2015 語法，如果想要調整瀏覽器支援度，請務必將 browserslist 設定檔中的 not IE 9-11 修改為 IE 9-11 即可！如下範例：

> 0.5%
last 2 versions
Firefox ESR
not dead
IE 9-11

此時執行 npx browserslist 的結果就會變成：

and_chr 75
and_ff 67
and_qq 1.2
and_uc 12.12
android 67
baidu 7.12
chrome 75
chrome 74
chrome 73
edge 18
edge 17
firefox 68
firefox 67
firefox 60
ie 11
ie 10
ie 9
ie_mob 11
ios_saf 12.2-12.3
ios_saf 12.0-12.1
ios_saf 11.3-11.4
kaios 2.5
op_mini all
op_mob 46
opera 62
opera 60
safari 12.1
safari 12
samsung 9.2
samsung 8.2

當然，除了調整 browserslist 設定檔外，若要支援 IE9+ 版本，還要適時的調整一下 src\polyfills.ts 設定檔才行喔！

相關連結

留言評論