说下browserslist-阿里云开发者社区

开发者社区> 开发与运维> 正文
登录阅读全文

说下browserslist

简介: browserslist 是一个开源项目 见到有些package.json里会有如下的配置参数 "browserslist": [ "> 1%", "last 2 versions", "Android >= 3.2", "Firefox >= 20", "iOS 7" ] 应该不难猜出来,这代表这个项目的浏览器兼容情况。

browserslist 是一个开源项目
见到有些package.json里会有如下的配置参数

 "browserslist": [
    "> 1%",
    "last 2 versions",
    "Android >= 3.2", 
    "Firefox >= 20", 
    "iOS 7"
  ]

应该不难猜出来,这代表这个项目的浏览器兼容情况。
白话就是我这个项目兼容绝大多数的,最新的和iOS7系统下的浏览器。不兼容Android 3.2系统以下和Firefox20以下的浏览器
像这些" > 1%", "last 2 versions" 都是查询参数。
查询参数很强大,比如我想查看中国人使用浏览器的情况请输入 > 1% in CN。竟然还有IE8 >_<。对比美国> 1% in US的。
具体参数列表见官方文档

那配这个除了说明我的项目支持情况,对开发有啥作用呢?

具体的影响到前端工具的编译情况,比如 Autoprefixer 可以给css加兼容性前缀
babel-preset-env , eslint-plugin-compat, stylelint-no-unsupported-browser-features 和 postcss-normalize
比如.babelrc文件你可以针对配置

{
  "presets": [
    ["env", {
      "targets": {
        "browsers": ["last 2 versions"],
        "node": "current"
      },
    }]
  ]
}
img_77e5d0b6c9384e6c19f00b1cea84aac0.png
20170928175559.png

更进一步根据浏览器可以获得特性,比如最新的chrome浏览器支持原生的promise,而IE不支持,babel根据browserslist配置项就会动态的转义。不用在一个个进行配置了。

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

分享:
开发与运维
使用钉钉扫一扫加入圈子
+ 订阅

集结各类场景实战经验,助你开发运维畅行无忧

其他文章