web-dev-qa-db-ja.com

.babelrcのプラグインとプリセットの違い

状況

だから私は.babelrc このような：

{
    "presets": [
        "es2015",
        "stage-2",
        "react"
    ],
    "plugins": [
        "transform-decorators-legacy"
    ]
}

質問

プリセットとプラグインの違いは何ですか？ Babelを設定するにはどちらを使用すればよいですか？

configurationbabeljsrc
18
totymedli

tl; dr

プリセットはプラグインの単なるコレクションです。プラグインを個別にplugins配列に含めることも、プラグインのコレクションをpresets配列に含めることもできます。プラグインがコレクション（プリセット）の一部である場合、プラグインをpluginsに個別に含める必要はありません。

Npmパッケージをpackage.jsonに含める場合も、同じことが言えます。

プリセットとプラグイン

Babelにはたくさんの 公式およびサードパーティのプラグイン があります。プリセットはプラグインのコレクションまたは 彼らが言うように ：

プリセットは、共有可能な.babelrc構成、または単にbabelプラグインの配列です。

2つの重要な違いは、 プラグインはプリセットの前にロードされます です。

プリセットのプラグイン

最も一般的なプリセットは 公式のもの と 廃止された実験的なプリセット です。

ほとんどの公式プリセットには、EcmaScript標準の機能をトランスパイルするプラグインが含まれていますが、実験（stage-x）プリセットには、標準化がまだ進行中の将来の実験機能をトランスパイルするプラグインが含まれています。これらの実験的/提案用プリセットは、Babel 7以降非推奨になりました。 理由に関するブログエントリ があります。以下のセクションを読んで、それらがどのように機能するかを確認してください。

プリセットをクリックすると、どのプラグイン（およびおそらく他のプリセット）がそれに含まれているかを確認できます。プリセットを介してプラグインを含める場合は、個別に含める必要はありません。プリセットのnpmパッケージを含める場合、package.jsonについても同じことが言えます。

非推奨のプロポーザルプリセットシステム

ステージ0（単なるアイデア）からステージ3（候補）に移行すると、標準化に近いプラグインのコレクションができました。このため、プリセットを含めると、stage-x値が高いすべてのプリセットも含まれます。これらのプリセットに含まれるプラグインは、進行中の作業であるため、バージョンごとに絶えず変化しており、プラグインが拒否された場合、プラグインが削除される可能性があります。そのため、 transform-decorators-legacy が必要でした。なぜなら、デコレータのトランスパイルは以前にBabelから削除されていたのですが、 後で追加し直された です。

24
totymedli