.browserslistrcの書き方とbrowserslistについて

browserslistっていうどのブラウザに対応させますか？ていうのを決めてくれる仕組みがあります。んでこのbrowserslistで設定した対応ブラウザ一覧は他の機能、例えばpostcssのautoprefixerとかで参照されるようになってる、というのが導入部分。

んでこのbrowserslistの設定方法やら勝手に有効になるのかとかそこらへんを書いていきます。

1. browserslistの設定は2種類
1. package.jsonに直書き
2. .browserslistrcに書く
2. どうやったら有効になるの？
3. browserslistの有効確認方法
4. コマンドライン直打ちでも有効？
5. 時々更新しよう
6. 「You made typo in browserslist」
7. まとめ

browserslistの設定は2種類

browserslistの設定方法は2種類あります。

1. package.jsonに直書き
2. .browserslistrcに書く

package.jsonに直書き

package.jsonに直書きする方法です。一番楽なんじゃないかなーと思います。

"browserslist": [
    "defaults"
  ]

こんなん追加するだけ。

最後のとこのカンマがあったりなかったりするとnpmでエラーが出るんでそういう時はカンマ付けたり外したりしてみてください。

.browserslistrcに書く

.browserslistrcというファイルを自分で作ってその中に対応ブラウザを書いてく方法です。

テキストファイルを作って名前を「.browserslistrc」として保存。保存場所はpackage.jsonと同じ階層で大丈夫です。

defaults

中身はシンプルでとりあえずこれで動きます。増やしたい場合は公式のマニュアルを見ながら増やしていく感じ。

どうやったら有効になるの？

どうやったらこの設定が有効になるのか、ですがどっちの方法でも勝手に読み取ってくれるので何もせずに有効になります。ものすごいラクチンですよね。逆にこんなんで本当に有効になっているのか疑うレベルです。

ということでbrowserslistが本当に有効になっているのか確認してみましょう。

browserslistの有効確認方法

今回はbrowserslistが有効かどうか確認するためにautoprefixerを使っていきますね。

（autoprefixerのインストール方法はこちら）

んでテスト用のcssを準備。名前は何でもいいんですがtset.cssにしました。

#test{
  appearance: none;
  user-select: none;
}

中身にベンダープレフィックスがたくさんつくプロパティを書いて、あとはautoprefixerを起動。するとたぶんベンダープレフィックスがたくさんついて出力されると思います。

ここまでは想定通り。

んじゃ次はbrowserslistを変更して、ベンダープレフィックスがつかない設定にしてみていきますね。

"browserslist": [
    "> 80% in JP"
  ]

or

80% in JP

これは日本（in JP）でシェアが80％以上のブラウザだけ考えてベンダープレフィックス付けてね！という指定。日本でシェア80％以上のブラウザなんて存在しないので、この命令だともちろんベンダープレフィックスはなにもつかないハズ…というわけです。

んでautoprefixerを実行すると今度はベンダープレフィックスが何もつかないハズです。これでbrowserslistが本当に有効になってるチェックができましたね。

コマンドライン直打ちでも有効？

わたしは諸事情があってnpm scriptsではなくコマンドラインで直打ちしてautoprefixerを実行（厳密にはバッチファイルにして実行）しているんですが、この方法でも②「.browserslistrcに書く」方法だと勝手に有効になっていました。

時々更新しよう

さっきの日本で上位○○%！みたいな書き方ってどうやってシェア判断してんの？ていうギモンがありますよね。

これはbrowserslistがローカルにシェア表みたいなのを持ってくれてるらしいんですが、ローカルに保存してるので時々更新して上げなくちゃいけないんです。

更新方法はコレ。npmが入ってる階層でこのコマンドを打てば勝手に更新してくれます。

npx browserslist@latest --update-db

「You made typo in browserslist」

エラーで「You made typo in browserslist」と表示されちゃう場合。これ焦りますよね。

これはあれです、タイプミスです。たぶん「browserlist」みたいに間の「s」を抜かしたりしちゃってるんだと思います。

私も最初是ばっかりでて英語が読めないもんだから「あれ？browserslistインストールできてないのかな」と焦っていました。

まとめ

browserslistの設定方法について書きました。

結局package.jsonに追記するか.browserslistrcというファイル名のファイルを自分で作ってその中に設定を書けば勝手に有効になる、ということ。

んで使ってみて思うんですが、もうひな形みたいなのが欲しいですよね。日本ならこの設定にしておけば間違いない！みたいなの。結局まだベストな設定が分からずいろいろいじってる感じです。

参考にしてみてくださいね。