🥷

package.jsonで時々見かけるbrowserslistとは

2023/12/18に公開

npm

browserslist

tech

今回取り上げるpackage.jsonのbrowserslistとは以下のようなものですな。

package.json

 ...
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  },
  ...

browserslistは大変便利かつ重要な設定でして学び直しがてら紹介してみようと記事に起こしました。

以下ブログ調なので、簡潔に知りたい場合は、https://github.com/browserslist/browserslist
を参照してください。

とりあえず、以下のコマンドを打ってみると

npx browserslist

以下の様な結果が得られるのであります。

実行結果

and_chr 119
and_ff 119
and_uc 15.5
android 119
chrome 119
chrome 118
chrome 117
chrome 116
chrome 114
chrome 113
chrome 109
chrome 103
edge 119
edge 118
edge 117
edge 87
firefox 120
firefox 119
firefox 115
ios_saf 17.1
ios_saf 17.0
ios_saf 16.6-16.7
ios_saf 16.5
ios_saf 16.3
ios_saf 16.2
ios_saf 16.1
ios_saf 16.0
ios_saf 15.6-15.7
ios_saf 12.2-12.5
op_mob 73
opera 104
opera 102
safari 17.1
safari 17.0
safari 16.6
safari 16.5
safari 16.3
safari 15.6
safari 14.1
samsung 23
samsung 22

なにやらOSとブラウザのversionっぽいものが出力されるのであります。
実は、こちらは「対応ブラウザ」のリストが出力されているのであります。

Webページにおいて、この対応ブラウザというのは大変重要な考え方でして、
どこまでのブラウザ環境をサポートするかによって、正常に動作するブラウザやファイルサイズが変わってくるのであります。

package.json(あるいは、.browserslistrcファイル)に記載したbrowserslist単独では対応ブラウザを明示しただけで、生成されるコードになんら影響を与えません。(当然ですな)

browserslistをサポートしているトランスパイラがあるということであります。
JavaScriptを古いブラウザでも使える様にするBabel,
CSSを古いブラウザでも使える様にするAutoprefixerなどですな。

BabelもAutoprefixerも、それぞれで対象にするブラウザのターゲットを指定できるのでありますが、別々に管理するといつか間違えが起きるというもの。そこで、このbrowserslistに対応したツールはpackage.json(あるいは、.browserslistrcファイル)に記載したbrowserslistの設定を読み込み対応ブラウザのリストを読み込めるのであります。

ここでbrowserslistの指定について少し触れると、ブラウザとversionの指定だけではなく2点重要なことが行えるのであります。

Queryを用いて柔軟な指定を行える
環境ごとの設定が行える

たとえば、

[production]
last 2 versions
not dead
[development]
last 1 chrome version
last 1 firefox version
last 1 safari version

Web技術者からよく参照されるCanIuseと密接に紐づいていて、上記のproduction環境では、「最新の前のversionまで、セキュリティ的にdeadしてないもの」とか日本国内でのシェアが0.2%以上みたいな形で指定できるわけですな。

Queryに関しては、browsersl.istという便利なツールがあり、こちらで気軽にお試しできるのであります。

以上になりますが、設定はプロダクト次第であります。一応公式にはベストプラクティスが載っていて、ブラウザを介してサービスを提供する側としてIEの悪魔が襲ってこない様にみたいなサービス提供者側のマインドセットにも言及しているので一読してみると面白いんじゃないでしょうか。

Queryに関しては「Browserslist のクエリには罠がある」という記事があがっているので、こちらも読んでみると良いんじゃいないかと思います。

Discussion