如何在專案中使用 Baseline

1. 簡介

Baseline 是一項計畫，旨在清楚說明哪些網頁功能可互通，且目前可安全使用。隨著 Baseline 工具的進步，您現在可以直接在專案中將 Baseline 做為 Browserslist 查詢，讓工具鍊根據您選擇的 Baseline 目標變更程式碼輸出內容。

在本程式碼研究室中，您將瞭解如何在範例專案中使用 Baseline，以及如何設定 Baseline 來選取特定目標。您也可以觀察專案工具鍊的輸出內容，如何根據所選的基準目標而變化。

2. 在本機電腦上設定試用版

首先，請前往慣用的終端機應用程式，複製範例存放區，然後輸入專案目錄：

git clone git@github.com:GoogleChromeLabs/baseline-demos.git
cd baseline-demos/tooling/webpack-browserslist-config-baseline

此時，這個範例已整合 Baseline，但您會想查看從頭開始的提交：

git checkout 94f12e34

複製存放區後，現在可以啟動試用版。這個專案使用 nvm 管理 Node 版本。如果您已在全域安裝相當新的 Node 版本，可能不需要完成這個步驟，但如果您使用 nvm，請執行下列指令：

nvm install
nvm use

接著，請安裝專案的套件：

npm install

如要查看試用版，請執行下列指令：

npm start

然後前往 http://localhost:8080。這個示範本身就是卡片清單，可使用頁面頂端的表單欄位進行篩選。應用程式本身會混合使用達到 Baseline 門檻的功能。

完成試用後，隨時可以前往終端機並按下 Ctrl+C，停止執行試用。

3. 如何將基準整合至專案

這個範例一開始不會指定 Browserslist 設定。Browserslist 是一種精簡的查詢語法，可告知工具鍊必須支援的最低瀏覽器版本。舉例來說，使用 last 3 years 查詢會指定廣泛的目標範圍。在本示範中，我們將使用名為 browserslist-config-baseline 的 npm 套件，指定與工具鍊中可用的 Baseline 目標一致的 Browserslist 查詢。

如要開始使用，請安裝 browserslist-config-baseline，如下所示：

npm install browserslist-config-baseline --save-dev

安裝後，您可以在專案中指定 extends Browserslist 查詢，解析為 Baseline 瀏覽器清單。這些基準目標可以是下列其中一項：

  • 變動目標：隨著新版瀏覽器推出，這些目標也會隨時間更新：
    • 基準：新推出，可讓您隨時查看過去 30 個月內，在核心瀏覽器組合中實作的可互通功能。
    • 基準廣泛適用：包括已在核心瀏覽器集中實作 30 個月以上的互通功能。
  • 固定目標：代表特定時間點的瀏覽器版本。這些年份介於 2016 年到目前年份之間。

首先，我們將使用 browserslist-config-baseline 為專案選取移動的 Baseline Widely available 目標。如要這麼做，請開啟 package.json 並新增下列內容：

"browserslist": "extends browserslist-config-baseline"

4. 選取不同的基準目標，觀察程式碼輸出內容的變化

您剛才選取「Baseline Widely available」做為示範專案的目標。接著，請建構專案：

npm run build

由於專案的 babel.config.js 中，@babel/preset-env 的 debug 選項指定為 true，因此會產生許多額外輸出內容。首先，請注意套件組合器統計資料中的 CSS 和 JavaScript 大小：

assets by status 213 KiB [emitted]
  asset js/home.5f3c5480.js 208 KiB [emitted] [immutable] [minimized] (name: home) 2 related assets
  asset css/home.20db50ef.css 3.64 KiB [emitted] [immutable] (name: home) 1 related asset
  asset index.html 564 bytes [emitted]

請注意，JavaScript 套件為 208 KiB，而 CSS 為 3.64 KiB。因為這個專案使用 core-js 進行 JavaScript 填補，並使用 autoprefixer 為尚未完全可互通的 CSS 屬性套用廠商專屬前置字元。core-js 和 autoprefixer 都會受到 browserslist-config-baseline 影響。

輸出內容中另一個需要注意的地方，是 Baseline Widely available 的 Browserslist 查詢如何轉譯為 Browserslist 查詢。在專案中，這看起來會類似於：

Using targets: {
  "chrome": "108",
  "edge": "108",
  "firefox": "108",
  "ios": "16",
  "safari": "16"
}

請注意建構輸出內容中 core-js 插入的 Polyfill：

The corejs3 polyfill added the following polyfills:
  es.iterator.constructor { "chrome":"108", "edge":"108", "firefox":"108", "ios":"16", "safari":"16" }
  es.iterator.filter { "chrome":"108", "edge":"108", "firefox":"108", "ios":"16", "safari":"16" }
  es.iterator.map { "chrome":"108", "edge":"108", "firefox":"108", "ios":"16", "safari":"16" }

如果變更基準目標，這項輸出內容可能會隨之變動。假設您的應用程式必須支援舊版瀏覽器，因為服務水準協議較為嚴格。如果是這種情況，您可能會選擇較保守的目標。在 package.json 檔案中，變更 Browserslist 設定，使其反映下列內容：

"browserslist": "extends browserslist-config-baseline/2016"

這會選取 Baseline 2016 做為目標，並轉換為 Browserslist 查詢。重新執行建構作業後，您會發現工具鍊輸出內容有以下差異：

npm run build

首先，請注意在 Bundler 統計資料中，專案的 JavaScript 和 CSS 檔案大小變化：

assets by status 237 KiB [emitted]
  asset js/home.b228612d.js 232 KiB [emitted] [immutable] [minimized] (name: home) 2 related assets
  asset css/home.0c3e4fd7.css 3.91 KiB [emitted] [immutable] (name: home) 1 related asset
  asset index.html 564 bytes [emitted]

您會發現 JavaScript 套件的大小增加了近 30 KiB。由於 autoprefixer 根據 2016 年的基準目標新增了更多供應商前置字元，因此專案的 CSS 僅略為變大。另請注意 Browserslist 查詢的變更：

Using targets: {
  "chrome": "53",
  "edge": "14",
  "firefox": "49",
  "ios": "10",
  "safari": "10"
}

與「廣泛支援」基準目標相比，這些瀏覽器版本早得多，甚至早到 Edge 的目標版本是 Chromium 前的版本。

注入的 Polyfill 也會變更，這比選取「Baseline Widely available」做為目標時多出許多：core-js

The corejs3 polyfill added the following polyfills:
  es.array.filter { "edge":"14" }
  es.iterator.constructor { "chrome":"53", "edge":"14", "firefox":"49", "ios":"10", "safari":"10" }
  es.iterator.filter { "chrome":"53", "edge":"14", "firefox":"49", "ios":"10", "safari":"10" }
  es.object.to-string { "edge":"14", "firefox":"49" }
  es.array.includes { "firefox":"49" }
  es.string.includes { "edge":"14" }
  es.array.map { "firefox":"49" }
  es.iterator.map { "chrome":"53", "edge":"14", "firefox":"49", "ios":"10", "safari":"10" }
  es.symbol { "edge":"14", "firefox":"49" }
  es.symbol.description { "chrome":"53", "edge":"14", "firefox":"49", "ios":"10", "safari":"10" }
  es.array.iterator { "chrome":"53", "edge":"14", "firefox":"49" }
  web.dom-collections.iterator { "chrome":"53", "edge":"14", "firefox":"49", "ios":"10", "safari":"10" }
  es.array.push { "chrome":"53", "edge":"14", "firefox":"49", "ios":"10", "safari":"10" }
  es.regexp.to-string { "edge":"14" }
  es.array.from { "edge":"14", "firefox":"49" }
  es.regexp.exec { "chrome":"53", "edge":"14", "firefox":"49", "ios":"10", "safari":"10" }
  es.regexp.test { "edge":"14" }
  es.error.cause { "chrome":"53", "edge":"14", "firefox":"49", "ios":"10", "safari":"10" }

重點是，基準目標可能會對專案工具鍊轉換應用程式的方式產生重大影響。在這個範例中，應用程式非常基本，無論是 React 或應用程式本身，都沒有太多尖端開發人員體驗功能。如果是複雜程度高出許多的大型應用程式，結果可能會大相逕庭，甚至可能需要更多填補程式、轉換和其他額外程式碼來源，才能符合您選擇的 Baseline 目標。

5. 使用 browserslist-config-baseline 指定下游瀏覽器

如要查看，Baseline 目標的核心瀏覽器組合包含下列瀏覽器：

  • Chrome
  • Android 裝置上的 Chrome
  • Firefox
  • Android 版 Firefox
  • Edge
  • macOS 上的 Safari
  • iOS 版 Safari

不過，您可以指定所謂的「下游瀏覽器」。這類瀏覽器的引擎衍生自核心瀏覽器集中的瀏覽器，最常見的是 Chromium。包括 Opera、Samsung Internet 等瀏覽器。您可以在 package.json 檔案中設定 browserslist-config-baseline，將這些項目設為目標，如下所示：

"browserslist": "extends browserslist-config-baseline/with-downstream"

這會根據「廣泛可用的基準」目標，指定下游瀏覽器。如要查看這項設定如何解析為 Browserslist 查詢，請重建專案：

npm start

然後注意 Browserslist 查詢的變化：

Using targets: {
  "android": "108",
  "chrome": "108",
  "edge": "108",
  "firefox": "108",
  "ios": "16",
  "opera": "94",
  "opera_mobile": "80",
  "safari": "16",
  "samsung": "21"
}

您也可以依年份指定下游瀏覽器。例如：

"browserslist": "extends browserslist-config-baseline/with-downstream/2016"

完成這項設定後，Browserslist 查詢就會隨之變更：

Using targets: {
  "android": "53",
  "chrome": "53",
  "edge": "14",
  "firefox": "49",
  "ios": "10",
  "opera": "40",
  "opera_mobile": "80",
  "safari": "10",
  "samsung": "6.2"
}

6. Lint 和其他工具

browserslist-config-baseline 是適用於 Bundler 和工具鍊其他部分的便利工具，但其他工具也有價值，例如採用 Baseline 目標做為設定一部分的 Lint 工具。

以支援 Baseline 的 Lint 工具為例，ESLint 提供 use-baseline 規則 (使用 @eslint/css)，可讓您指定 Baseline 新推出、Baseline 廣泛支援或 Baseline 年份，做為 CSS Lint 的一部分。社群 @html-eslint/eslint-plugin 套件中也有類似規則，可讓您對 eslint.config.js 檔案中的 HTML 功能執行相同操作：

export default [
  /* Omitted JS linting rules ... */
  // Lint CSS files for Baseline:
  {
    files: ["**/*.css"],
    plugins: {
      css
    },
    language: "css/css",
    rules: {
      "css/no-duplicate-imports": "error",
      // Lint CSS files to make sure they are using
      // only Baseline Widely available features:
      "css/use-baseline": ["warn", {
        available: "widely"
      }]
    },
  },
  // Lint HTML and JSX files for Baseline:
  {
    files: ["**/*.html"],
    ...html.configs["flat/recommended"],
    rules: {
      // Lint HTML files to make sure they are using
      // only Baseline Widely available features:
      "@html-eslint/use-baseline": ["warn", {
        available: "widely"
      }]
    }
  }
];

這項設定有幾點需要注意：

  1. HTML 和 CSS 檢查套件都使用 use-baseline 規則，並透過 available: "widely" 設定選項設為「廣泛適用」。
  2. 對於這兩個 Linting 套件，違規事項的記錄層級都設為 "warn"。這項屬性可以設為 "error"，以便使用錯誤代碼退出，避免發生建構作業。

您可能在先前執行 npm run build 時看過 Linter 輸出內容，但如要單獨查看 Linter 輸出內容，可以執行下列指令：

npm run lint

您會看到輸出內容，其中醒目顯示專案 CSS 中的多項警告：

/var/www/baseline-demos/tooling/webpack-browserslist-config-baseline/src/css/normalize.css
  222:3  warning  Property 'outline' is not a widely available baseline feature  css/use-baseline

/var/www/baseline-demos/tooling/webpack-browserslist-config-baseline/src/css/styles.css
  62:3   warning  Property 'outline' is not a widely available baseline feature                                css/use-baseline
  81:23  warning  Value 'subgrid' of property 'grid-template-rows' is not a widely available baseline feature  css/use-baseline

7. 總結

如您所見，在專案中使用 browserslist-config-baseline 時，您需要瞭解基礎建構工具和 Browserslist，但只要稍加努力，應該就能將其放入專案中。使用這項功能的優點是，您不必再考慮支援的瀏覽器版本號碼，而是以 Baseline 目標為準，讓系統為您完成繁重的工作。

此外，還有一個在 Rollup 上執行的這個範例版本，您也可以使用該範例，大致按照這個程式碼研究室的步驟操作。

其他組合工具也開始提供基準支援。舉例來說，Vite 7 版預設會以 Baseline 廣泛支援的瀏覽器為目標，而這項工具在幕後使用 Rollup。

無論您決定採用哪種做法，只要在專案的工具鍊中導入 browserslist-config-baseline，並選取適合您的 Baseline 目標，就能以更簡單可靠的方式指定瀏覽器。