發布日期：2025 年 5 月 7 日
Browserslist 是目前最熱門的工具之一，可用於設定前端程式碼集合中支援的最低瀏覽器版本。開發人員在 package.json 檔案中加入 browserslist 查詢，Browserslist 就會列出支援的最低瀏覽器清單。Browserslist 可搭配各種熱門的 linting、polyfilling 和封裝工具使用，包括：
- Autoprefixer
- 使用
@babel/preset-env的 Babel - 使用
postcss-preset-env的 PostCSS - 使用
eslint-plugin-compat的 ESLint - 使用
stylelint-no-unsupported-browser-features執行 Stylelint - webpack
基準目標
決定使用基準時，請考量使用者族群，並決定要鎖定哪些基準功能組合：
- 基準廣泛可用包含基準核心瀏覽器組合在過去 30 個月內完全支援的所有網頁功能。
- 基準年功能組合 (例如 Baseline 2020) 包含指定年份結束時新推出的所有功能。
視使用者族群而定，您可以指定「廣泛可用」基準線，或是指定較舊的基準年。請參閱分析或 RUM 工具，瞭解使用者使用的瀏覽器版本。
安裝「browserslist-config-baseline」
決定要指定哪個基準功能組合後，您就可以將該目標套用至開發人員工具。如要為使用 browserslist 的任何工具執行這項操作，最簡單的方法就是安裝 browserslist-config-baseline：
# npm
npm i browserslist-config-baseline@latest -D
# yarn
yarn add --latest browserslist-config-baseline -D
# bun
bun add browserslist-config-baseline@latest -d
如何指定「基準：普遍可用」
如要指定「廣泛可用」基準，請使用 extends 關鍵字在 package.json 中更新或新增 browserlist 設定：
{
...
"browserslist": [
"extends browserslist-config-baseline"
]
...
}
當 browserslist 載入支援的瀏覽器清單時，browserslist-config-baseline 會動態產生目前的最低瀏覽器版本，支援目前廣泛提供的所有功能。您也可以將 extends browserslist-config-baseline 新增至 .browserslistrc 檔案，系統會以相同方式處理。
如何指定基準年
如要指定基準年資料集，請在 browserslist 查詢結尾處，以 YYYY 格式新增 / 和年份：
"browserslist": "extends browserslist-config-baseline/2020"
如何指定下游瀏覽器
基準核心瀏覽器組合包括 Chrome、Edge、Firefox 和 Safari。其他瀏覽器的基礎是與 Chrome 和 Edge 相同的開放原始碼，也就是 Chromium，因此應支援與所實作 Chromium 版本相同的功能組合。
browserslist-config-baseline 會使用 baseline-browser-mapping，將瀏覽器版本與其支援的功能集建立關聯。baseline-browser-mapping 支援 UC Browser 行動版和 QQ Browser 行動版的對應項目，未來可能會加入其他瀏覽器。
如要在基準設定中加入這些瀏覽器，請在 browserslist 設定中模組名稱後方立即新增 /with-downstream：
"browserslist": "extends browserslist-config-baseline/with-downstream"
或：
"browserslist": "extends browserslist-config-baseline/with-downstream/2020"
browserslist-config-baseline 運作實例
在封裝工具中
將 browserslist-config-baseline 新增至存放區後，即可立即生效。Babel 是熱門的 JavaScript 封裝建構工具。如果您使用 @babel/preset-env 套件預設值，許多新式 JavaScript API 和方法會改用舊版瀏覽器所需的冗長語法：
不過，如果在同一個範例專案中將 browserslist-config-baseline 設為以 2020 基準值為目標，這項 JavaScript 的輸出大小就會大幅減少，因為所需的語法轉換作業會減少：
您可以使用 Google Chrome 實驗室的 baseline-demos 存放區中的範例程式碼，親自試試看。
在 Linter 中
部分 Linter 已可與 Browserslist 搭配運作，或是可透過相容性模組與 Browserslist 搭配運作。舉例來說，stylelint 可以使用 stylelint-browser-compat 模組使用 browserslist 設定。將 stylelint.config.js 檔案設為使用 browserslist-config-baseline：
module.exports = {
plugins: ['stylelint-browser-compat'],
rules: {
'plugin/browser-compat': [
true,
{
browserslist: ['extends browserslist-config-baseline'],
},
],
},
};
Stylelint 現在會標示目前不在「基準」中廣泛提供的 CSS：
Stylelint 也提供外掛程式，可讓您直接設定基準規則，但如果您已使用 browserslist 處理設定，browserslist-config-baseline 就是最適合的解決方案。
如何為 browserslist-config-baseline 貢獻內容
如要為 browserslist-config-baseline 提出功能要求，請在 GitHub 存放區建立問題或提取要求。
如要提供更多下游瀏覽器資料，或回報資料問題，請在 baseline-browser-mapping 存放區中建立問題或提交合併要求。