Browserslist とは何か? ブラウザサポートを一元管理する設定

Browserslist は、プロジェクトがサポートするブラウザを宣言する共有設定フォーマットで、トランスパイラ、polyfill ツール、PostCSS などが共通して読み取ります。

いくつものビルドツールがサポート対象のブラウザを知る必要があり、それを各ツールで繰り返し記述するとずれが生じやすくなります。Browserslist は、すべてのツールが読み取る 1 つの設定でこれを解決します。サポートするブラウザを記述するクエリを書くと、各ツールは共有の利用データを用いてそれを具体的なリストに解決します。これはブラウザターゲットを置く正規の場所です。

クエリの仕組み

Browserslist の設定は、last 2 versions、not dead、あるいはあるしきい値を超えるカバレッジといったクエリの集合です。Browserslist はそれらを組み合わせ、caniuse の利用データセットに対して解決し、正確なブラウザリストを生成します。

誰が読み取るのか

Babel などのトランスパイラは、down-level するシンタックスを選ぶために読み取ります。
polyfill インジェクタは、必要な polyfill だけを追加するために読み取ります。
Autoprefixer は、正しい CSS プレフィックスを付けるために読み取ります。

設定が置かれる場所

クエリは package.json の browserslist キー、または専用の .browserslistrc に置けます。リポジトリ内に保持することで、すべてのツールとすべての開発者が同じターゲットに解決されます。

データバージョンの落とし穴

Browserslist は、時間とともに更新される利用データベースを使ってクエリを解決します。同じコードのビルドでも、異なるデータベースバージョンを使えば、解決されるブラウザリストが変わるため、結果が異なることがあります。

CI/CD における Browserslist

再現可能な CI ビルドのためには、caniuse-lite のデータバージョンを lockfile で固定し、意図的に更新します。そうしないと、日常的な依存関係の更新が、ソースコードは変わっていないのに、出荷される polyfill やプレフィックスをひそかに変えてしまうことがあります。固定することで、同じコミットが毎回同じ出力を生成するようになります。

重要なポイント

Browserslist は、多くのビルドツールがブラウザサポートのために読み取る 1 つの共有設定です。
クエリは利用データを使って具体的なブラウザリストに解決されます。
CI ビルドを再現可能に保つため、ブラウザデータのバージョンを固定します。