困惑相信大家都是曾用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 versionsnot deadbrowserslist能够把上面近似于人类语言的配置，转换成一组浏览器集合。不过它的主要职责就是转化上面的配置内容，按照正则过滤出正确浏览器列表内容，而它本身不提供浏览器列表的来源。1.3 caniuse-liteBrowserslist的浏览器数据来源，并且是caniuse-db库的精简版本，从caniuse-db库衍化而来，只不过对caniuse-db数据按照一定规则做了简化，使得库的大小减少了许多，并且提供一些查询api供他人使用，每当caniuse-db更新时，也会跟着一起发布版本。1.4 caniuse-dbcaniuse的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 Standardrec - W3C Recommendationpr - W3C Proposed Recommendationcr - W3C Candidate Recommendationwd - W3C Working Draftother - Non-W3C, but reputableunoff - Unofficial, Editor’s Draft or W3C “Note”（7）categories：分类HTML5CSSCSS2CSS3SVGPNGJS APICanvasDOMOtherJSSecurity（8）stats：浏览器、浏览器对特性支持情况未完待续…..