共计 2788 个字符，预计需要花费 7 分钟才能阅读完成。
困惑
相信大家都是曾用 caniuse 网站查询过 css、js 的一些兼容性问题，并且都从它的浏览器兼容性数据中获益，让我们的线上项目更加稳定、和谐的跑在用户电脑里。不过对于 caniuse 页面上的一些细节，我们可能会感到困惑或者模棱两可，今天就带着大家一起来重新认识 caniuse 这个网站，并对它的原理和细节做些探究。
1.1 从 babel-preset-env 说起
babel-preset-env 是 babel6 中极力推崇的一个 preset，preset 是 babel plugins 的一个集合，相当于一堆 plugins 的一个统称。在 babel 最开始打江山的时候，es6 才刚开始出现，babelrc 的配置中只需要添加 es2015 这样的 preset，但随着 es2016、es2017 的相继出现，babelrc 很快就会变成一堆挂历式的集合体。所以 babel 给出了 env 这个杀器，既避免了 es20xx 的出现，又可以与 caniuse 的权威数据融合，让配置 preseet 科学而简单。
{
“presets”: [
[“env”, {
“targets”: {
“browsers”: [“last 2 versions”, “safari >= 7″]
}
}]
]
}
这是 babel 官网给出的 env 配置方案，”last 2 versions”, “safari >= 7″，这两个条件是并集的关系，babel 将会给出地球上所有最后两个版本的浏览器，而在 safari 中将不受第一个条件的限制，给出所有 version 超过 7 的 safari 浏览器版本，这两个条件得出的浏览器及版本加在一起后，算出一组浏览器及它们的最低版本。
babel 是用来转换 js 语法的一个编译器，为什么还能知道满足 env 条件的浏览器跟版本，这要从 browserslist 这个库说起.
1.2 Browserslist
这个库不仅仅用在 babel-preset-env 中，像 autoprefixer 这样知名的库，也是用到了它。
last 1 version
> 1%
maintained node versions
not dead
browserslist 能够把上面近似于人类语言的配置，转换成一组浏览器集合。不过它的主要职责就是转化上面的配置内容，按照正则过滤出正确浏览器列表内容，而它本身不提供浏览器列表的来源。
1.3 caniuse-lite
Browserslist 的浏览器数据来源，并且是 caniuse-db 库的精简版本，从 caniuse-db 库衍化而来，只不过对 caniuse-db 数据按照一定规则做了简化，使得库的大小减少了许多，并且提供一些查询 api 供他人使用，每当 caniuse-db 更新时，也会跟着一起发布版本。
1.4 caniuse-db
caniuse 的 npm 包，提供了 caniuse 网站查询所需的所有数据。
2.caniuse 库的介绍
2.1 如何为 caniuse 贡献数据
caniuse 鼓励大家去 github 上提交 pr，经过审核之后就可以被录用到它的官方数据库中。首先，它为我们准备了 sample-data.json 文件，按照此文件格式把需要增加的特性名称、介绍和浏览器兼容性情况填写清楚，保存并放到 features-json 文件夹中，最后提交 pull request 即可，审核完毕后会自动把这部分新增特性保存到 data.json 中，data.json 就是 caniuse 官方的数据库导出文件，供其他库调用，每次 json 文件变化后，都会 release 一个新版本。
2.2 sample-data.json
内容如下：
{
“title”:”Sample title”,
“description”:”Sample description”,
“spec”:”http://example.com/path/to/spec.html”,
“status”:”wd”,
“links”:[
{
“url”:”http://example.com/path/to/link.html”,
“title”:”Link title”
}
],
“bugs”:[
{
“description”:”Sample bug description”
}
],
“categories”:[
“CSS”
],
“stats”:{
“ie”:{
…
“11”:”u”
},
“edge”:{
…
“18”:”u”
},
“firefox”:{
…
“67”:”u”
},
“chrome”:{
…
“75”:”u”
},
“safari”:{
…
“TP”:”u”
},
“opera”:{
…
“58”:”u”
},
“ios_saf”:{
…
“12.2”:”u”
},
“op_mini”:{
“all”:”u”
},
“android”:{
…
“67”:”u”
},
“bb”:{
“7”:”u”,
“10”:”u”
},
“op_mob”:{
…
“46”:”u”
},
“and_chr”:{
“71”:”u”
},
“and_ff”:{
“64”:”u”
},
“ie_mob”:{
…
“11”:”u”
},
“and_uc”:{
“11.8”:”u”
},
“samsung”:{
…
“8.2”:”u”
},
“and_qq”:{
“1.2”:”u”
},
“baidu”:{
“7.12”:”u”
}
},
“notes”:”Sample notes for feature, explain partial support here”,
“notes_by_num”:{
“1”:”First note…”
},
“usage_perc_y”:0,
“usage_perc_a”:0,
“ucprefix”:false,
“parent”:”parentfeatureid”,
“keywords”:”example,keywords”,
“shown”:false,
“ie_id”:””,
“chrome_id”:””,
“firefox_id”:””,
“webkit_id”:””
}
（1）title：特性名称（2）description：特性介绍（搜索时的关键字）（3）spec：跳转到详细介绍页面（4）links：拓展内容介绍（5）keywords：搜索时的关键字（6）status：特性在标准中的状态
ls – WHATWG Living Standard
rec – W3C Recommendation
pr – W3C Proposed Recommendation
cr – W3C Candidate Recommendation
wd – W3C Working Draft
other – Non-W3C, but reputable
unoff – Unofficial, Editor’s Draft or W3C “Note”
（7）categories：分类
HTML5
CSS
CSS2
CSS3
SVG
PNG
JS API
Canvas
DOM
Other
JS
Security
（8）stats：浏览器、浏览器对特性支持情况
未完待续 …..
