前端设计

browserslist 解析

2023-01-29

用vue-cli构建项目时会发现在package.json中存在 “browserslist”字段或 .browserslistrc文件,它的作用是指定项目的目标浏览器范围。Vue官方推荐用“browserslist”字段的方式。

1、package.json 中{

  "browserslist": [

    "last 1 version",

    "> 1%",

    "maintained node versions",

    "not dead"

  ]

}

2、.browserslistrc 中

"browserslist": [

    "> 1%",

    "last 2 versions",

    "not dead"

  ]

">1%":代表全球超过1%的人使用浏览器

"last 2 versions":代表所有浏览器都兼容到最后两个版本

"not ie <= 8":表示IE浏览器版本大于等于8的兼容

"safari >=7”:表示safari浏览器版本大于等于7


Browserslist这个东西单独是没用的,(补充: 在vue官方脚手架中,browserslist字段会被 @babel/preset-env 和 Autoprefixer 用来确定需要转译的 JavaScript 特性和需要添加的 CSS 浏览器前缀。)