Open kangyana opened 1 year ago
browserslist (opens new window)用特定的语句来查询浏览器列表,如 last 2 Chrome versions。
last 2 Chrome versions
$ npx browserslist "last 2 Chrome versions" chrome 100 chrome 99
它是现代前端工程化不可或缺的工具,无论是处理 JS 的 babel,还是处理 CSS 的 postcss,凡是与垫片相关的,他们背后都有 browserslist 的身影。
babel
postcss
browserslist
@babel/preset-env
core-js
autoprefixer
关于前端打包体积与垫片关系,我们有以下几点共识:
那在前端工程化实践中,当我们确认了浏览器版本号,那么它的垫片体积就会确认。
假设项目只需要支持最新的两个谷歌浏览器。那么关于 browserslist 的查询,可以写作 last 2 Chrome versions。
而随着时间的推移,该查询语句将会返回更新的浏览器,垫片体积便会减小。
如使用以上查询语句,一年前可能还需要 Promise.any 的垫片,但目前肯定不需要了。
Promise.any
最终,谈一下 browserslist 的原理: browserslist 根据正则解析查询语句,对浏览器版本数据库 caniuse-lite 进行查询,返回所得的浏览器版本列表。
caniuse-lite
PS: caniuse-lite 这个库也由 browserslist 团队进行维护,它是基于 caniuse (opens new window)的数据库进行的数据整合。
因为 browserslist 并不维护数据库,因此它会经常提醒你去更新 caniuse-lite 这个库,由于 lock 文件的存在,因此需要使用以下命令手动更新数据库。
$ npx browserslist@latest --update-db
该命令将会对 caniuse-lite 进行升级,可体现在 lock 文件中。
"caniuse-lite": { - "version": "1.0.30001265", - "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001265.tgz", - "integrity": "sha512-YzBnspggWV5hep1m9Z6sZVLOt7vrju8xWooFAgN6BA5qvy98qPAPb7vNUzypFaoh2pb3vlfzbDO8tB57UPGbtw==", + "version": "1.0.30001332", + "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001332.tgz", + "integrity": "sha512-10T30NYOEQtN6C11YGg411yebhvpnC6Z102+B95eAsN0oB6KUs01ivE8u+G6FMIRtIrVlYXhL+LUwQ3/hXwDWw==", "dev": true },
> 5%
> 5% in CN
last 2 versions
dead
Chrome > 90
not ie <= 10
browserslist (opens new window)用特定的语句来查询浏览器列表,如
last 2 Chrome versions
。它是现代前端工程化不可或缺的工具,无论是处理 JS 的
babel
,还是处理 CSS 的postcss
,凡是与垫片相关的,他们背后都有browserslist
的身影。babel
,在@babel/preset-env
中使用core-js
作为垫片postcss
使用autoprefixer
作为垫片关于前端打包体积与垫片关系,我们有以下几点共识:
那在前端工程化实践中,当我们确认了浏览器版本号,那么它的垫片体积就会确认。
假设项目只需要支持最新的两个谷歌浏览器。那么关于 browserslist 的查询,可以写作
last 2 Chrome versions
。而随着时间的推移,该查询语句将会返回更新的浏览器,垫片体积便会减小。
如使用以上查询语句,一年前可能还需要
Promise.any
的垫片,但目前肯定不需要了。1. 原理
最终,谈一下 browserslist 的原理: browserslist 根据正则解析查询语句,对浏览器版本数据库
caniuse-lite
进行查询,返回所得的浏览器版本列表。因为 browserslist 并不维护数据库,因此它会经常提醒你去更新
caniuse-lite
这个库,由于 lock 文件的存在,因此需要使用以下命令手动更新数据库。该命令将会对
caniuse-lite
进行升级,可体现在 lock 文件中。2. 常用的查询语法
根据用户份额
> 5%
:在全球用户份额大于 5% 的浏览器> 5% in CN
:在中国用户份额大于 5% 的浏览器根据最新浏览器版本
last 2 versions
:所有浏览器的最新两个版本last 2 Chrome versions
:Chrome 浏览器的最新两个版本不再维护的浏览器
dead
:官方不在维护已过两年,比如 IE10浏览器版本号
Chrome > 90
:Chrome 大于 90 版本号的浏览器not ie <= 10
:IE 不小于等于 10 版本号的浏览器