babel-preset-envでインポート文としてポリフィルを使うか、webpack.config.jsにエントリを追加する方が良いですか？

Question

babel-preset-envは、babel-polyfillに適用し、import 'babel-polyfill'を特定の環境ベースのimport 'core-js/whateverに変換するオプションuseBuiltInsを提供します。

babel-polyfillをWebpackの入力セクション（下記の例を参照）に追加すると、この変換が適用されますか？その場合、useBuiltInsは無視され、すべての可能なインポートによって置き換えられますか？

entry: { 
    app: ['babel-polyfill', './src/app.js'] 
} 

Answer 1

あなたがspecifingしているとき、それは動作します：

"presets": [ ..., "env" ] 

をご./src/app.jsはすでに私が推測要件、といくつかのコードを含んでいるとして、それは、エントリポイントに関連していません。私はちょうどあなたがエントリポイントにbabel-polyfillを加えることによって達成したいと思っているのか分かりませんが、この場合は何の効果もないようです。

私はそれがどのように動作するかを詳しく説明しようとします。変換プラグインとポリフィルのリストを作成するプラグインはbabel-preset-envです。このリストは、transform-polyfill-require-pluginによって使用され、importおよびrequireステートメントが検索され、環境固有のモジュールのリストで置き換えられます。

エントリーポイントには一切関係ありません。 babel-polyfillを追加することで、コードをバンドルに追加するだけです。だからtransform-polyfill-require-pluginは何とかそこで動作しません。簡単なデバッグで確認することができます。

あなたは本当にそれを必要としません。ドキュメントに気付いたとおり、require("babel-polyfill");をアプリに一度追加するだけで済みます。 babel-polyfillを2回インポートすることはできません。エラーが発生する可能性があります。その場合、globalに書き込まれ、衝突のチェックが行われます。