目次
Browserslistとは
package.jsonや.browserslistrcファイルなどにターゲットブラウザの条件を追加して取得する仕組み。
例えば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" の指定は不可。
