問題タブ [babel-preset-env]

Gatsby でサポートされている browserlist を使用して、Gatsby とポリフィルを試していました ( doc )。

デフォルトの browserlist 構成を使用すると、IE11 のポリフィルと動作中のアラートを作成する期待される結果が得られます。私のgithub repo exampleを参照してください。このサイトは現在Netlify で利用できます。

したがって、アロー関数と array.prototype.find 関数がどのようにポリフィルされているかを製品コードで確認できます。今のところ変なことはありません。

ここで、browserlist を変更してlast 2 Chrome versionsプロダクションをビルドすると、配列の find() メソッドのポリフィルが消えることが予想されます。これは、chrome でサポートされているためです。ただし、同じポリフィル (core-js から) をapp-2934fab61c547573181d.js次の場所で見つけることができると思います。

私の質問は、明らかにこれを必要としない browserlist クエリを使用している場合でも、これらのポリフィルがまだ利用できるのはなぜですか?

指定されたターゲットブラウザのリストに関して、ポリフィルを自動的に挿入するようにbabel preset-envを構成しようとしています。

ドキュメントにはpreset-env、の形式のプロパティを使用してプリセットを構成すると、"useBuiltIns": "usage"まさにこれが行われると記載されています。

(このプロパティだけを指定するとコンソールに警告が表示されることに気付きましたが、使用するコア js バージョンを指定する必要があるため、これも追加しました。)

したがって、私のbabel.config.jsは次のようになります。

素晴らしい！これは簡単なはずです！

ただし、webpack で再コンパイルすると、私のアプリはブラウザーで停止し、次のコンソール メッセージが表示されます。

私はいくつかの調査を行いました（約3時間の価値しかありません！）これは、babelがbabelをトランスパイルしようとした結果、またはそのようなものであると理解しています...無視のリストにいくつかのファイルを追加する必要がありますおそらく、トランスパイルされたり、二重にトランスパイルされたりすることはありません。

私のwebpack構成では、次のものを入れました。(除外エントリに注意してください)。

また、無視パターンにいくつかのバリエーションを追加しようとしましたが、それでも致命的なコンソール エラーが発生します。

私が試したもう1つのことは、node_modulesフォルダーを無視することですが、まったく変換されていないコードの大きな塊があります。つまり、IE11 では、トランスピルされていないベンダー スクリプトに由来する ES6 アロー関数に関する構文エラーが発生します。

が望ましくない方法で変更されている理由を誰かが説明できる場合は__webpack_require__、この問題に必要な正確な解決策が研究に非常に抵抗しているため、私は非常に感謝しています.

編集:以下は、 babelを無視するようにする必要があることを示唆していますがcore-js、これは非常に合理的です。babel 設定ファイルで以下を使用することを提案します。

ただし、これにより、別のかなり、一見非特異的なエラーが発生します。