web-dev-qa-db-ja.com

バベルポリフィルvsバベルプラグイン

Babelオプション/設定で少し迷ってしまいました。最近のjs機能を使用し、（webpackを使用して）ブラウザーコードにコンパイルします。

babel-polyfill と babel plugins の違いは何ですかbabel-preset-env？

彼らは一緒に働くつもりですか？

babeljsbabel-polyfill
10
François Romain

この記事からの回答 ：

_babel transform plugin_と_babel-polyfill / babel-runtime_の違いは、ES5で機能を今日再実装できるかどうかです。たとえば、_Array.from_はES5で書き換えることができますが、JavaScriptに矢印関数構文を追加するためにES5で記述できるものはありません。したがって、矢印関数の変換はありますが、_Array.from_の変換はありません。 _babel-polyfill_または_babel-runtime_のような別のポリフィルによって提供される必要があります。

余談ですが、これが私の現在のバベルの生態系に対する理解です。

BabelはJavaScriptコンパイラです：itparses、transformsおよびは、変換されたコードを出力します。

バベルコア

  • これはparseおよびoutputの部分です。
  • 変換は行いません。
  • コマンドラインまたはバンドラー（webpack、rollupなど）から使用できます。

babel-polyfill/babel-runtime

babelプラグイン

  • あなたが書いたコードを変換します。
  • _babel syntax / transform plugins_：es2015 +構文を解析して変換し（矢印関数のように）、es5に変換します。
  • _babel-plugins-stage-x_（ステージ0からステージ4へ）：JS仕様にはまだ含まれていない将来のJavaScript構文を、ステージ0（アイデア）からステージ4（babel-plugins_すぐに）。

babel-preset-env

  • _babel-preset-env_は、特定の環境に必要なBabelプラグインとポリフィルを決定します。
  • 設定なしで、es2015 +をes5にトランスパイルするために必要なすべてのプラグイン（es2015、es2016、es2017を含む）をロードします。
  • targetオプションを指定すると、特定のターゲットでの実行に必要なプラグインのみがロードされます。
  • builtInオプションを使用すると、ターゲットではない組み込みでない_babel-polyfill_のみが使用されます。
  • まだ_babel-transform-runtime_では機能しません（2017年11月現在）。 （ this issue を参照）
24
François Romain

babel-preset-env は、自動的に設定することを目的としたBabelプリセットです babel plugins とターゲット環境のセットに基づいて必要な babel polyfills を含めます 機能互換性テーブル に対してチェックされます。

完全に機能するES2015 +環境を非ES2015 +クライアントで実行するには、単純なコードトランスレーションでは不十分な場合があります。

  • ESジェネレーターは regenerator ライブラリーを使用して有効になります（babel-polyfillによって提供されます）
  • ES2015 +メソッドが欠落しています（Promise、Map、Object.assign...など）は core-js （babel-polyfillも提供）
  • その他の変換可能な機能は、標準のbabelプラグインによって生成され、事前設定された babel-presets を介してよく使用されます

だから、あなたの質問に戻って、babel-preset-envはbabel-polyfillとbabelプラグイン。

3
Andrea Carraro