ブラウザターゲットとは？サポートするブラウザ

ブラウザターゲットとは、アプリがサポートすると約束するブラウザとバージョンの集合であり、buildはそれを使ってコードの変換方法を決めます。

これまでに作られたすべてのブラウザをサポートすれば出力は肥大化し、最新のものだけをサポートすれば一部のユーザーが壊れてしまいます。ブラウザターゲットはその境界を明示的に引きます。buildはそれを読み取り、どの構文をdown-levelするか、どのpolyfillを追加するか、どのCSS prefixを出力するかを決めます。これはtranspiling、polyfilling、autoprefixingを1つに結びつける唯一の設定です。

ターゲットの表現方法

ターゲットは通常、各ブラウザの直近2バージョン、あるいは一定以上の市場シェアを持つブラウザといったクエリとして書かれます。ツールはそれらのクエリを現在のブラウザ利用データに照らして具体的なリストに解決します。

ターゲットが駆動するもの

transpilerがどれだけの構文をdown-levelするか。
どのpolyfillが注入されるか。
Autoprefixerがどのベンダーprefixを追加するか。

サポート対サイズのトレードオフ

広いターゲットはより多くのユーザーをサポートしますが、より多くのtranspileされたコードとpolyfillを出荷するため、bundleは大きく遅くなります。狭いターゲットはより無駄のない出力を出荷しますが、一部のユーザーを切り捨てます。ターゲットは設定にエンコードされた製品上の意思決定です。

ツール間で共有される

transpiler、polyfillツール、PostCSSがすべて同じブラウザターゲットを読むため、一度定義すればJSとCSSの出力の一貫性が保たれます。1か所で変更すればbuild全体が更新されます。

CI/CDにおけるブラウザターゲット

ターゲットは出力に影響するため、暗黙ではなくcommit済みの設定に含めなければなりません。CIはクエリを解決するブラウザ利用データセットにも依存します。そのデータセットバージョンをpinすることでbuildの再現性が保たれます。そうしないと、更新されたデータセットがコード変更なしに出力を変えてしまうことがあるからです。

重要なポイント

ブラウザターゲットは、buildがサポートするブラウザの明示的な集合です。
1か所からtranspiling、polyfilling、CSS prefix付与を駆動します。
再現性のため、CIはターゲットとブラウザのデータセットバージョンの両方をpinしなければなりません。