web-dev-qa-db-ja.com

@ babel / preset-envのuseBuiltInsオプションについて混乱（Browserslist Integrationを使用）

Babel 7とWebpack 4を使用してWebプロジェクトに取り組んでいます。Babelを使用したことがなく、その一部を実際に理解できません。 documentation に基づいて、私は@babel/preset-envを使用しています（なぜなら、特に初心者向け）。また、.browserslistrcファイルを介してBrowserslist統合を使用しています。

Webpackはコンパイルをうまく行います（babel-loaderバージョン8.0.2）、エラーはありませんが、これについて混乱していますuseBuiltIns: "entry"option here およびBabelでのpolyfillシステムの動作。

。babelrc.js

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

。browserslistrc
here からコピーしました（私のプロジェクトは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は必要ありませんでした...

ありがとう！

-編集-

Babelのチームは、 updated に基づいて、 docs of @babel/polyfill 不明瞭/誤解を招くドキュメントについて不平を言ういくつかのGitHubの問題（私のものを含む）。今、それを使用する方法は明らかです。 （...そしてその後、私の元の質問は愚かに見える：）

javascriptwebpackbabelbabel-preset-env
21
ARS81

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

はい、バベルのドキュメントによると：

「このオプションは、ステートメントimport "@ babel/polyfill"またはrequire（ "@ babel/polyfill"）を、環境に基づいて個々の@ babel/polyfillを必要とする新しいプラグインを有効にします」-基本的に、必要なすべてのpolyfills（必要に応じて@babel/polyfillをインストールしてください）。

2）@ babel/polyfillパッケージをインストールし、require（ "@ babel/polyfill"）でvendors.jsを起動する必要がありますか？ ？

@babel/polyfillをインストールする必要がありますが、デフォルトではbabelには付属していません。エントリポイントにそれを含めるか、エントリポイントの上部にインポートを追加する必要があります。

3）両方を省略した場合はどうなりますか？

ポリフィルはありません。

12
PlayMa256

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

はい、ターゲット環境に基づいてポリフィルを含める場合。

TL; DR

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

"entry"：このオプションを使用すると、@babel/preset-envはcore-jsの直接インポートを、必要な特定のモジュールのみのインポートに置き換えます。ターゲット環境。

つまり、追加する必要があります

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

エントリポイントに追加すると、これらの行は必要なポリフィルのみに置き換えられます。 chrome 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";

"usage"：この場合、ターゲット環境で一部の機能の使用がサポートされていない場合、ポリフィルが自動的に追加されます。そう：

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);

ターゲットブラウザが最新のクロムである場合、変換は適用されません。

必要なポリフィルのみがbrowserlistで設定されたターゲット環境に基づいて自動的に追加されるため、ソースコードに何も（core-jsまたはリジェネレータ）を含める必要がないため、個人的に私が選んだ武器です。

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

2）@ babel/polyfillパッケージをインストールし、require（ "@ babel/polyfill"）でvendors.jsを開始する必要がありますか？ ？

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をプロジェクトの依存関係として追加し、そのバージョンをcorejsプロパティの下の@babel/preset-envに設定することを忘れないでください。

3）両方を省略した場合はどうなりますか？

@ PlayMa256が既に答えているように、ポリフィルはありません。

より詳細で完全な情報は、core-js作成者のページ にあります。

また、 babel sandbox で自由にプレイしてください

19
Egor Litvinchuk