babel/preset-env の useBuiltIns オプションに戸惑う（Browserslist Integration を使用）。

質問

Babel 7とWebpack 4を使ったWebプロジェクトに取り組んでいます。Babelを使ったことがなく、よく理解できない部分があります。ベースは ドキュメント を使っているのですが @babel/preset-env を使うようにしています。また、Browserslistとの統合は、私の .browserslistrc ファイルを使っています。

Webpackはコンパイルをうまく( babel-loader バージョン 8.0.2 ) の場合、エラーは出ませんが、次のように混乱しています。 useBuiltIns: "entry" オプションは、ここに記載されている そして、どのように polyfill のシステムがBabelでどのように動作しているかを説明します。

.babelrc.js

module.exports = {
  presets: [
    ['@babel/preset-env', {
      "useBuiltIns": "entry" // do I need this?
    }]
  ],
  plugins: [
    '@babel/plugin-syntax-dynamic-import'
  ]
};

.ブラウザリスト

コピー元 ここで (をコピーします（私のプロジェクトはBootstrapを使用しているので、合理的だと思いました）。

>= 1%
last 1 major version
not dead
Chrome >= 45
Firefox >= 38
Edge >= 12
Explorer >= 10
iOS >= 9
Safari >= 9
Android >= 4.4
Opera >= 30

そこで質問なのですが

1)私はその useBuiltIns: "entry" オプションを使用する必要がありますか？

2) インストールする必要がありますか？ @babel/polyfill パッケージをインストールし vendors.js で require("@babel/polyfill"); ?

3) 両方省略した場合は？

1と2を実行した場合、私の vendors.js に成長し 411 KB

両方省略すると、ちょうど 341 KB

になります。

と思ったら @babel/preset-env はデフォルトですべての書き換えとポリフィルを処理し、余計な import/require を必要としません。

ありがとうございます!

-- EDIT --

バベルのチームは、ちょうど を更新しました。 その のドキュメントを更新しました。 @babel/polyfill は、GitHub の課題 (私の課題も含む) で、不明瞭なドキュメントや誤解を招くようなドキュメントに対して苦情を申し立てたことに基づいています。これでどう使うかは一目瞭然です。(...そしてその後、私の元の質問は愚かなように思える :)

どのように解決するのですか？

<ブロッククオート

1) useBuiltIns: "entry"オプションを使用する必要がありますか？

はい、ターゲット環境に応じてポリフィルを組み込みたい場合です。

TL;DR

には基本的に3つのオプションがあります。 useBuiltIns :

"エントリー"。 : このオプションを使用した場合。 @babel/preset-env の直接インポートを置き換えます。 core-js を、ターゲット環境に必要な特定のモジュールだけのインポートに置き換えます。

つまり

import "core-js/stable";
import "regenerator-runtime/runtime";

をエントリーポイントに追加すると、これらの行は必要なポリフィルファイルに置き換えられます。クローム72をターゲットとする場合、以下のように変換されます。 @babel/preset-env に変換されます。

import "core-js/modules/es.array.unscopables.flat";
import "core-js/modules/es.array.unscopables.flat-map";
import "core-js/modules/es.object.from-entries";
import "core-js/modules/web.immediate";

---

"使い方" この場合、ある機能の利用がターゲット環境でサポートされていない場合、ポリフィルが自動的に追加されます。つまり

const set = new Set([1, 2, 3]);
[1, 2, 3].includes(2);

のようなブラウザで ie11 に置き換わります。

import "core-js/modules/es.array.includes";
import "core-js/modules/es.array.iterator";
import "core-js/modules/es.object.to-string";
import "core-js/modules/es.set";

const set = new Set([1, 2, 3]);
[1, 2, 3].includes(2);

対象ブラウザが最新のクロームの場合、変換は行われません。

ブラウザリストに設定されたターゲット環境に応じて、必要なポリフィルのみが自動的に追加されるため、ソースコードに何も（core-jsやregenerator）入れる必要がなく、個人的にはこれが一番の武器だと思っています。

---

false : ポリフィルが自動的に追加されない場合のデフォルト値です。

---

2) @babel/polyfill パッケージをインストールし、ベンダー.js を require("@babel/polyfill") で起動する必要がありますか？ vendor.js を require("@babel/polyfill"); で起動する必要がありますか？

の前の環境では、はい。 babel v7.4 と core-js v3 .

TL;DR

いいえ。 babel v7.4 と core-js v3 (これはフードの下のポリフィリングに使われます) @babel/preset-env は、どのポリフィルが必要で、推奨される順序であるかを知っているときだけ、ポリフィルを追加します。

さらに @babel/polyfill は非推奨とされ、独立した core-js と regenerator-runtime が含まれます。

の使用は useBuiltIns を false 以外のオプションで使用すると、問題が解決するはずです。

を追加することを忘れないでください。 core-js をプロジェクトに追加し、そのバージョンを @babel/preset-env の下に corejs のプロパティがあります。

---

3) 両方省略した場合は？

すでに@PlayMa256が回答しているように、ポリフィルはありません。

---

より詳細で完全な情報は、以下を参照してください。 core-js クリエーターズページ

また バベルサンドボックス