BrowserslistをBrowserlistと間違えるなどのよくある間違いについて

Browserslistとは

package.jsonや.browserslistrcファイルなどにターゲットブラウザの条件を追加して取得する仕組み。

最近はpackage.jsonに追加するのが主流になっている。

例えばpackage.jsonに次のように追加すれば1%を超えるシェアで2バージョン前までのサポートが終了していないブラウザが対象となる。

{
  "browserslist": [
    "> 1%",
    "last 2 versions",
    "not dead"
  ]
}

BrowserlistではなくBrowserslist

タイトルにも書いたがBrowserslistをBrowserlistと間違えているケースがある。

sが付いているのが正しいので注意が必要。

package.jsonやファイル名が.browserlistrcなどになっているとBrowserslistが動作しない。

npx browserslistで対象ブラウザを確認

browserslistで設定した対象ブラウザを確認するにはnpx browserslistを実行する。

$ npx browserslist
and_chr 96
and_ff 94
and_qq 10.4
and_uc 12.12
android 96
baidu 7.12
chrome 96
chrome 95
chrome 94
edge 96
edge 95
firefox 94
firefox 93
ie 11
ios_saf 15.0-15.1
ios_saf 14.5-14.8
ios_saf 14.0-14.4
kaios 2.5
op_mini all
op_mob 64
opera 81
opera 80
safari 15.1
safari 15
safari 14.1
samsung 15.0
samsung 14.0

not deadを付けていないケースがある

たまにnot deadが含まれていないケースが見受けられるが、not deadが付いていないとサポートが終了しているブラウザも含まれてしまうのでnot deadは必ず追加したほうが良い。

ちなみに前述の「"browserslist": "> 1%, last 2 versions, not dead"」でnot deadが含まれていないとIE10などが含まれてしまう。

Browserslistは最新版を使うようにする

Browserslistはcaniuse-liteを使用してターゲットブラウザを追加して取得するのだが、caniuse-liteのバージョンが古いとターゲットブラウザを正しく取得できない。

最新バージョンにするには以下のコマンドを実行する。

npx browserslist@latest --update-db

もし最新バージョンでなければアップデートが開始される。

最新バージョンであればLatest versionとInstalled versionが同じになる。

$ npx browserslist@latest --update-db
Latest version:     1.0.30001284
Installed version:  1.0.30001284
caniuse-lite is up to date
caniuse-lite has been successfully updated

browserslistは配列で記述

browserslistは配列ではなくテキストで以下のようにも書けるが記述ミスを発生しやすいので配列のほうが良い。

例えばカンマの前に半角スペースがあるとエラーになって実行できない。

{
  "browserslist": "> 1%, last 2 versions, not dead"
}

requireで読み込んで利用したいことがあった際にも配列でないと都合が悪い。

const { browserslist } = require('./package.json');

ブラウザの指定にはバージョンも必要

"not IE 11" は有効だがバージョンがない "not IE"や "IE" の指定は不可。