关于browserslist的配置

其实上次迁移的过程中有看到package.json中有一段browserslist的配置，但是也没特别在意，后面又去官方文档研究了一波，输出了这篇文章。

Browserslist

目的

browserslist是为了兼容在不同运行环境（不同版本浏览器、服务端Node）下的前端代码的。

使用范围（via官方）

1. Autoprefixer
2. Babel
3. postcss-preset-env
4. eslint-plugin-compat
5. stylelint-no-unsupported-browser-features
6. postcss-normalize
7. obsolete-webpack-plugin

配置位置

package.json

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

.browserslistrc

last 1 version
> 1%
maintained node versions
not dead

具体参数意义

首先browserslist的配置内容可以理解为一个查询集合，我们根据这个集合组合来定制我们项目的兼容范围。

1. > 5%：兼容全球浏览器使用数量占比5%以上的类型。数值可以根据实际场景自定义，同理，除>也支持>=，<，<=。
2. > 5% in US：数据采集范围->国家（双字母构成，CH、JP等等）。
3. > 5% in alt-AS：数据采集范围->大洲（双字母后缀，alt-af、alt-as等等）。
4. > 5% in my stats：数据采集范围->自身的WEB项目，需要结合browserslist-ga-export，该包使我们无需登陆Google账号就能生成我们站点的访问浏览器版本数据，browserslist-stats.json。
5. cover 99.5%：覆盖全球99.5%的浏览器类型，即支持绝大多数的现代浏览器。
6. cover 99.5% in US：与前面同理。
7. cover 99.5% in my stats：与前面同理。
8. maintained node versions：兼容所有仍被支持的NODE版本。
9. node 10 and node 10.4：兼容最新的10.x.x或10.4.x版本。
10. current node：兼容当前环境下的NODE版本。
11. extends browserslist-config-mycompany：从browserslist-config-mycompany中继承配置。
12. ie 6-8设置兼容IE版本范围。
13. not ie <= 8设置不支持的IE版本范围。
14. Firefox > 20设置FF版本范围，同理也支持>=，<及<=。
15. iOS 7：设置支持的iOS浏览器版本。
16. last 2 versions：每个浏览器支持的最新2个版本。
17. last 2 Chrome versions：Chrome浏览器支持的最新2个版本。
18. last 2 major versions：每个浏览器支持的最新2个主分支版本。
19. last 2 years：最近2年支持的版本。
20. since 2015：自2015年来支持的版本。
21. dead：一年内未被官方维护更新的版本。
22. defaults：browserslist的默认配置（> 0.5%, last 2 versions, Firefox ESR, not dead）。

以上条件可以进行集合操作，通过or或,进行并集操作，通过and进行交集操作，not取非包含关系集合。