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": "
原創文章，作者：小藍，如若轉載，請註明出處：https://www.506064.com/zh-tw/n/192943.html