前言
最近在看create-react-app财边，剛好把browserslist的資料整理下來。一方面督促自己多寫博客点骑，另一方面練習(xí)自己的英語水平（6級還沒過的我(酣难；′д｀)ゞ
browserslist的作用
這個配置能夠分享目標瀏覽器和nodejs版本在不同的前端工具。這些工具能根據(jù)目標瀏覽器自動來進行配置黑滴，
使用方法
(1) package.json （推薦
{
"browserslist": [
"last 1 version",
"> 1%",
"maintained node versions",
"not dead"
]
}
(2) .browserslistrc
# Browsers that we support
last 1 version
> 1%
maintained node versions
not dead
Browserslist 的數(shù)據(jù)都是來自Can I Use的憨募。如果你想知道配置語句的查詢結(jié)果可以使用[online demo] (https://browserl.ist/)
查詢 last 1 version
你就可以看到最新的各個瀏覽器版本
支持的插件
Browserslist這個東西單獨是沒用的，（補充: 在vue官方腳手架中跷跪，browserslist字段會被 @babel/preset-env 和 Autoprefixer 用來確定需要轉(zhuǎn)譯的 JavaScript 特性和需要添加的 CSS 瀏覽器前綴馋嗜。2019-7-22）下面的搭配的工具列表：
- Autoprefixer
- Babel
- postcss-preset-env
- eslint-plugin-compat
- stylelint-no-unsupported-browser-features
- postcss-normalize
了解更多請看這個list
或者npx browserslist
最終選擇
Browserslist將使用以下來源之一的瀏覽器和Node.js版本查詢：
- browserslist鍵入package.json當(dāng)前或父目錄中的文件齐板。 我們推薦這種方式吵瞻。
- 工具選項葛菇。例如browsersAutoprefixer中的選項。
- BROWSERSLIST 環(huán)境變量橡羞。
- browserslist 當(dāng)前或父目錄中的配置文件眯停。
- .browserslistrc 當(dāng)前或父目錄中的配置文件。
- 如果上述方法沒有產(chǎn)生有效結(jié)果卿泽，則Browserslist將使用默認值： > 0.5%, last 2 versions, Firefox ESR, not dead莺债。
最佳實踐
-
last 2 Chrome versions這種配置最好當(dāng)你只想在對應(yīng)的一個瀏覽器下開發(fā)webapp，生產(chǎn)情況下最好不要签夭，畢竟其他瀏覽器也有市場份額 - 如果你想自己配置齐邦，我建議你結(jié)合
last 1 version, not dead with > 0.2% (or > 1% in US, > 1% in my stats.last n version會增加很過過時的瀏覽器并且沒有增加流行的舊版本瀏覽器。> 0.2%看起來更加合適（根據(jù)份額來定） - 不要僅因為您不了解瀏覽器而刪除瀏覽器第租。Opera Mini在非洲擁有1億用戶措拇，它在全球市場上比微軟邊緣更受歡迎。中文QQ瀏覽器的市場份額比Firefox和桌面Safari都要多慎宾。（第一次知道丐吓，qq還是強啊，但是360呢..）
一些語句的含義
-
dead: browsers from last 2 version query, but with less than 0.5% in global usage statistics and without official support or updates for 24 months. Right now it is IE 10, IE_Mob 10, BlackBerry 10, BlackBerry 7, and OperaMobile 12.1.
例子
自己項目中使用的
"browserslist": [
"> 1%",
"last 2 versions",
"not ie <= 8"
]
最后
毫無疑問這篇很粗淺趟据，還是多看npm文檔比較實際...~~再慢慢補充
