browserslist 作用以及使用

底层框架搭建必备配置

搞一下

作用

引用 掘金博主 @clonecello的话：

在创建前端工程的时候，一个比较好的做法是制定你的工程上线之后主要支持的浏览器版本，在你支持的浏览器版本里面，你的项目运行没问题，不在范围的浏览器可能会出现一些高级 JS，css 特性不支持的 bug。哪些新的 ES6+的特性保留原样，哪些特性要转译成 es5，webpack，babel 本身是通过这个工具提供的浏览器支持范围来确定的

依个人所见，browserslist的作用主要为上线后的浏览器兼容性，目标用户使用的浏览器是什么，根据项目场景而定。

使用方法有两种：

第一种：在根目录中配置 .browserslist 文件

类似这种

last 1 version 
> 1% maintained 
> node versions
not dead

第二种： 在package.json配置中

{ 
    "browserslist": [ 
        "last 1 version",
        "> 1%",
        "maintained node versions",
        "not dead"
    ] 
}

将这两者任意一个通过打包上线，实现浏览器兼容性，像是打包上线的一项浏览器兼容性配置

具体配置属性

• > 5%: 基于全球使用率统计而选择的浏览器版本范围。>=,<,<=同样适用。

• > 5% in US : 同上，只是使用地区变为美国。支持两个字母的国家码来指定地区。

• > 5% in alt-AS : 同上，只是使用地区变为亚洲所有国家。这里列举了所有的地区码。

• > 5% in my stats : 使用定制的浏览器统计数据。

• cover 99.5% : 使用率总和为99.5%的浏览器版本，前提是浏览器提供了使用覆盖率。

• cover 99.5% in US : 同上，只是限制了地域，支持两个字母的国家码。

• cover 99.5% in my stats :使用定制的浏览器统计数据。

• maintained node versions :所有还被 node 基金会维护的 node 版本。

• node 10 and node 10.4 : 最新的 node 10.x.x 或者10.4.x 版本。

• current node :当前被 browserslist 使用的 node 版本。

• extends browserslist-config-mycompany :来自browserslist-config-mycompany包的查询设置

• ie 6-8 : 选择一个浏览器的版本范围。

• Firefox > 20 : 版本高于20的所有火狐浏览器版本。>=,<,<=同样适用。

• ios 7 :ios 7自带的浏览器。

• Firefox ESR :最新的火狐 ESR（长期支持版） 版本的浏览器。

• unreleased versions or unreleased Chrome versions : alpha 和 beta 版本。

• last 2 major versions or last 2 ios major versions :最近的两个发行版，包括所有的次版本号和补丁版本号变更的浏览器版本。

• since 2015 or last 2 years :自某个时间以来更新的版本（也可以写的更具体since 2015-03或者since 2015-03-10）

• dead :通过last 2 versions筛选的浏览器版本中，全球使用率低于0.5%并且官方声明不在维护或者事实上已经两年没有再更新的版本。目前符合条件的有 IE10,IE_Mob 10,BlackBerry 10,BlackBerry 7,OperaMobile 12.1。

• last 2 versions :每个浏览器最近的两个版本。

• last 2 Chrome versions :chrome 浏览器最近的两个版本。

• defaults :默认配置> 0.5%, last 2 versions, Firefox ESR, not dead。

• not ie <= 8 : 浏览器范围的取反。

• 可以添加not在任和查询条件前面，表示取反

作者：CloneCello
链接：juejin.cn/post/684490… 来源：稀土掘金

不好意思我是个废物

，

大致就是这样，依据不同场景调用不同的配置

但一般情况下，使用以下这些就足够了

last 2 versions // 支持最近的两个版本 （这个必须加，或是最近一个，或是最近两个版本）
>1% // 全球大于1%使用率的浏览器（这个必须加）
maintained node versions // 目前依然在更新的node（这个也视情况而定，可以不加）
not dead // 可以使用，大概就是这个意思，浏览器及版本兼容配置后必须跟这个确保生效

目前我也在一个学习的过程，欢迎各位大佬随时来喷，如果可以给些许指导就更好了