Vue .browserslistrc

Vue  .browserslistrc

 

在使用腳手架搭建項目時,會自動生成.browserslistrc文件,該文件只要是 配置兼容瀏覽器

對於部分配置參數做一些解釋:
" >1%" :代表着全球超過1%人使用的瀏覽器
“last 2 versions” : 表示所有瀏覽器兼容到最後兩個版本
“not ie <=8” :表示IE瀏覽器版本大於8(實則用npx browserslist 跑出來不包含IE9 )
“safari >=7”:表示safari瀏覽器版本大於等於7

鏈接:https://blog.csdn.net/weixin_42418196/article/details/112216046

 

vue-cli browserslist瀏覽器兼容性

1. 介紹

你會發現有 package.json 文件裏的 browserslist 字段 (或一個單獨的 .browserslistrc 文件),指定了項目的目標瀏覽器的範圍。這個值會被 @babel/preset-envAutoprefixer 用來確定需要轉譯的 JavaScript 特性和需要添加的 CSS 瀏覽器前綴。

Autoprefixer : PostCSS插件解析CSS並使用Can I Use中的值將供應商前綴添加到CSS規則。它由Google 推薦並在Twitter和阿里巴巴中使用。
Can I Use : 查看CSS樣式在不同瀏覽器下得兼容性。

.browserslistrc 文件

2. 最佳實踐

  • 僅僅當你在特定瀏覽器上開發類似於信息亭之類的 web app 的時候,纔可以用類似 last 2 Chrome versions 的查詢條件來鎖定特別具體的瀏覽器品牌和版本。市面上有各種各樣的瀏覽器,同時瀏覽器的版本碎片化也很嚴重,如果你在開發一款通用的 webapp,那就應該考慮瀏覽器多樣性導致的兼容問題。
  • 如果你想改變,我們建議結合瀏覽器的默認設置last 1 version,not dead> 0.2%(或 > 1% in US, > 1% in my stats)。last n versions添加了太多死瀏覽器,並沒有添加流行的舊版本。0.2% 從長遠來看,選擇一個百分比將使流行的瀏覽器更受歡迎。我們可能會遇到壟斷和停滯的情況,就像我們使用Internet Explorer 6.請謹慎使用此設置。
  • 不要僅因爲您不瞭解瀏覽器而刪除瀏覽器。Opera Mini在非洲擁有1億用戶,在全球市場上比微軟邊緣更受歡迎。中文QQ瀏覽器的市場份額比Firefox和桌面Safari更多。

3. 完整清單

您可以通過查詢指定瀏覽器和Node.js版本(不區分大小寫):

  • > 5%:全球使用情況統計選擇的瀏覽器版本。 >=<<=工作。
  • > 5% in US:使用美國使用情況統計。它接受兩個字母的國家/地區代碼
  • > 5% in alt-AS:使用亞洲地區使用情況統計。可在以下位置找到所有地區代碼的列表caniuse-lite/data/regions
  • > 5% in my stats:使用自定義使用數據
  • cover 99.5%:提供覆蓋的最流行的瀏覽器。
  • cover 99.5% in US:與上述相同,使用雙字母國家代碼
  • cover 99.5% in my stats:使用自定義使用數據
  • maintained node versions:所有Node.js版本,仍由 Node.js Foundation 維護
  • node 10node 10.4:選擇最新的Node.js 10.x.x10.4.x發佈。
  • current node:Browserslist目前使用的Node.js版本。
  • extends browserslist-config-mycompany:從browserslist-config-mycompanynpm包中獲取查詢 。
  • ie 6-8:選擇包含範圍的版本。
  • Firefox > 20:Firefox的版本比20更新 >=<並且也可以<=工作。
  • iOS 7:iOS瀏覽器版本7直接。
  • Firefox ESR:最新的[Firefox ESR]版本。
  • unreleased versionsunreleased Chrome versions:alpha和beta版本。
  • last 2 major versionslast 2 iOS major versions:最近2個主要版本的所有次要/補丁版本。
  • since 2015last 2 years:自2015年以來發布的所有版本(也since 2015-03since 2015-03-10)。
  • dead:來自last 2 version查詢的瀏覽器,但全球使用統計數據少於0.5%,且24個月內沒有官方支持或更新。現在是IE 10IE_Mob 10BlackBerry 10BlackBerry 7,和OperaMobile 12.1
  • last 2 versions每個瀏覽器的最後兩個版本。
  • last 2 Chrome versions:Chrome瀏覽器的最後兩個版本。
  • defaults:Browserslist的默認瀏覽器(> 0.5%, last 2 versions, Firefox ESR, not dead)。
  • not ie <= 8:排除先前查詢選擇的瀏覽器。

您可以添加not到任何查詢。

4. 調試

  • npx browserslist 在項目目錄中運行以查看選擇了哪些瀏覽器。

也可以通過 browserl.ist 網站查看選擇了哪些瀏覽器

 

參考https://www.jianshu.com/p/b3ea906d7d24

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章