CanIUse-Lite: 全方位分析

一、CanIUse-Lite基本介绍

CanIUse-Lite作为CanIUse的精简版，CanIUse是一个非常流行的Web前端开发者查询网站，它提供了一个很友好的界面，允许我们通过输入一个CSS属性名称或一个JavaScript API函数名称来获取有关这个功能的浏览器兼容性信息。CanIUse的后端利用了caniuse-db来处理和获取数据，它是一个出色的程序，适合在本地、在线、浏览器扩展程序或其他开发工具中使用。它具有很高的可扩展性，它的数据库还可以被其他开发人员轻松地扩展或更新。

CanIUse-Lite是CanIUse的精简版，它可以用来提供一个小型或者自定义的数据工具，然而我们不需要像CanIUse一样浪费太多的带宽和磁盘空间。它只是使用了原始的caniuse-db数据并生成了JSON文件，而且这个JSON文件非常小，只有不到200 KB。CanIUse-Lite可以很容易地部署到任何字节限制或磁盘空间受限的地方，而且它可以最大化地增强用户体验。

以下是CanIUse-Lite的使用方式示例：

const caniuse = require('caniuse-lite');

function checkCompatibility(property){
  console.log(caniuse.feature(property).stats);
}

checkCompatibility('flexbox');
// { and_chr: { 69: "a" }, and_ff: {"68":"a","66":"x"}, ...

二、CanIUse-Lite的优缺点

1. 优点

首先，CanIUse-Lite比CanIUse更加精简，更加轻量级，这使得它非常适合像移动设备或运行限制较大的运行环境中使用。

其次，CanIUse-Lite允许我们自己定义需要检测的CSS属性或JavaScript API函数，这有助于缩小我们需要检测的数据大小，并最小化网络带宽的使用。

最后，CanIUse-Lite是一个开放源代码的项目，任何人都可以使用它来搭建一个自己的检测工具，并且能够轻松地向已有的数据库添加新数据。

2. 缺点

相对于CanIUse的完整版，CanIUse-Lite的一些功能有所缺失，例如它没有提供友好的HTML界面、搜索、排版等等。此外，如果我们想要最新的数据，我们仍然需要从CanIUse的数据库中获得最新的数据，并更新到CanIUse-Lite的JSON文件中。

三、CanIUse-Lite的环境依赖与使用方式

1. 环境依赖

CanIUse-Lite是一个基于Node.js的模块，因此我们需要先安装Node.js和npm。安装完成后，我们可以通过以下命令创建一个基于CanIUse-Lite的项目：

mkdir caniuse-lite-demo
cd caniuse-lite-demo
npm init -y
npm install caniuse-lite --save

安装完成后，我们可以在项目中通过以下方式使用CanIUse-Lite：

const caniuse = require('caniuse-lite');

console.log(caniuse.feature('flexbox'));

2. 使用方式

CanIUse-Lite允许我们根据我们需要的功能轻松地自定义需要查询的数据。我们可以使用以下代码，来指定我们需要查询的CSS属性或JavaScript API函数：

const caniuse = require('caniuse-lite');

const property = 'flexbox';
console.log(caniuse.feature(property));

const apiFunction = 'fetch';
console.log(caniuse.feature(apiFunction));

四、CanIUse-Lite的更新和数据扩展

CanIUse-Lite的更新是由caniuse-db的更新触发的。如果我们想要保持CanIUse-Lite的数据最新，我们可以获取caniuse-db并预处理它，最后生成CanIUse-Lite的JSON文件，具体步骤如下：

mkdir caniuse-db
cd caniuse-db
git clone https://github.com/Fyrd/caniuse.git
cd caniuse
npm install
npm run build
cp -r ./dist/data ../

cd ../
npm init -y
npm install caniuse-lite --save

如果我们想要添加新的CSS属性或JavaScript API函数到CanIUse-Lite上，我们可以通过在caniuse-db上添加新的数据和测试用例来实现。在我们添加数据之后，我们可以执行以下命令手动更新CanIUse-Lite的JSON文件：

npm run build

五、CanIUse-Lite的特色功能

1. 查询CSS属性的兼容性

CanIUse-Lite的一个主要功能是查询CSS属性的兼容性。我们可以使用以下代码来查询Flexbox的兼容性：

const caniuse = require('caniuse-lite');

const feature = 'flexbox';
console.log(caniuse.feature(feature));

输出结果是JSON格式的数据：

{
  "title": "Flexible Box Layout Module",
  "description": "Method of positioning elements in horizontal or vertical stacks",
  "spec": "https://www.w3.org/TR/css-flexbox-1/",
  "status": "rec",
  "links": [
    {
      "url": "https://caniuse.com/#feat=flexbox",
      "title": "Browser Compatibility"
    },
    {
      "url": "https://www.w3.org/TR/css-flexbox-1/",
      "title": "Spec"
    },
    {
      "url": "https://github.com/Fyrd/caniuse/issues/5155",
      "title": "Issues / Quirks"
    }
  ],
  "categories": [
    "CSS"
  ],
  "stats": {
    "ie": {
      "9": "a",
      "10": "a",
      "11": "a"
    },
    "edge": {
      "12": "a",
      "13": "a",
      "14": "a",
      "15": "a",
      "16": "a",
      "17": "a",
      "18": "a",
      "79": "a",
      "80": "a",
      "81": "a",
      "83": "a"
    },
    "firefox": {
      "2": "a",
      "3": "a",
      "3.5": "a",
      "3.6": "a",
      "4": "a",
      "5": "a",
      "6": "a",
      "7": "a",
      "8": "a",
      "9": "a",
      "10": "a",
      "11": "a",
      "12": "a",
      "13": "a",
      "14": "a",
      "15": "a",
      "16": "a",
      "17": "a",
      "18": "a",
      "19": "a",
      "20": "a",
      "21": "a",
      "22": "a",
      "23": "a",
      "24": "a",
      "25": "a",
      "26": "a",
      "27": "a",
      "28": "a",
      "29": "a",
      "30": "a",
      "31": "a",
      "32": "a",
      "33": "a",
      "34": "a",
      "35": "a",
      "36": "a",
      "37": "a",
      "38": "a",
      "39": "a",
      "40": "a",
      "41": "a",
      "42": "a",
      "43": "a",
      "44": "a",
      "45": "a",
      "46": "a",
      "47": "a",
      "48": "a",
      "49": "a",
      "50": "a",
      "51": "a",
      "52": "a",
      "53": "a",
      "54": "a",
      "55": "a",
      "56": "a",
      "57": "a",
      "58": "a",
      "59": "a",
      "60": "a",
      "61": "a",
      "62": "a",
      "63": "a",
      "64": "a",
      "65": "a",
      "66": "x",
      "67": "x",
      "68": "a",
      "69": "a",
      "70": "a",
      "71": "a",
      "72": "a",
      "73": "a",
      "74": "a",
      "75": "a",
      "76": "a",
      "77": "a",
      "78": "a",
      "79": "a",
      "80": "a",
      "81": "a",
      "82": "a",
      "83": "a",
      "84": "a",
      "85": "a",
      "86": "a",
      "87": "a",
      "88": "a"
    },
    ...
  },
  "usage_perc_y": 98.99,
  "usage_perc_a": 0,
  "usage_perc_total": 98.99,
  "prefix": "flexbox",
  "prefix_exceptions": null,
  "keywords": "flexwrap, flex-flow, align-content, align-items, justify-content, flex-grow, flex-shrink, flex-basis, order",
  "notes": null
}

我们可以看到这个数据包含了这个CSS属性的名称，描述，详细说明，spec网址，浏览器兼容性等等。我们可以通过读取这些JSON数据，并将这些信息映射到我们的工具中，来轻松地实现查询CSS属性的兼容性检测。

2. 查询JavaScript API函数的兼容性

与查询CSS属性的兼容性一样，CanIUse-Lite还可以查询JavaScript API函数的兼容性。我们可以使用以下代码来查询fetch函数的兼容性：

const caniuse = require('caniuse-lite');

const feature = 'fetch';
console.log(caniuse.feature(feature));

输出结果是JSON格式的数据：

{
  "title": "Fetch API",
  "description": "A new standard for fetching resources",
  "spec": "https://fetch.spec.whatwg.org/",
  "status": "rec",
  "links": [
    {
      "url": "https://caniuse.com/#feat=fetch",
      "title": "Browser Compatibility"
    },
    {
      "url": "https://fetch.spec.whatwg.org/",
      "title": "Spec"
    },
    {
      "url": "https://github.com/github/fetch/issues/175",
      "title": "Issues / Quirks"
    }
  ],
  "categories": [
    "JS API"
  ],
  "stats": {
    "ie": {
      "10": "a",
      "11": "a"
    },
    "edge": {
      "12": "a",
      "13": "a",
      "14": "a",
      "15": "a",
      "16": "a",
      "17": "a",
      "18": "a",
      "79": "a",
      "80": "a",
      "81": "a",
      "83": "a"
    },
    "firefox": {
      "43": "a",
      "44": "a",
      "45": "a",
      "46": "a",
      "47": "a",
      "48": "a",
      "49": "a",
      "50": "a",
      "51": "a",
      "52": "a",
      "53": "a",
      "54": "a",
      "55": "a",
      "56": "a",
      "57": "a",
      "58": "a",
      "59": "a",
      "60": "a",
      "61": "a",
      "62": "a",
      "63": "