.babelrc 中插件和预设的区别

Question

情况

所以我有一个像这样的.babelrc：

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

问题

预设和插件有什么区别？我应该使用哪一个来配置 Babel？

Answer 1

tl;博士

预设只是插件的集合。您可以在plugins 数组中单独包含插件，或在presets 数组中包含插件集合。如果插件是集合（预设）的一部分，则不必将其单独包含在 plugins 中。

当您将 npm 包包含在 package.json 中时，同样如此。

预设与插件

Babel 有很多 official and third party plugins。预设是插件的集合或as they say:

预设是可共享的 .babelrc 配置或只是一组 babel 插件。

两者之间的一个重要区别是plugins are loaded before presets。

预设插件

最常见的预设是official ones 和discontinued experimental presets。

大多数官方预设都包含用于转译 EcmaScript 标准功能的插件，而实验性 (stage-x) 预设包含转译未来实验功能的插件，这些功能的标准化仍在进行中。自 Babel 7 起，这些实验/提案预设已被弃用。它们有一个 blog entry on the reasons。阅读以下部分，了解它们是如何工作的。

当您单击预设时，您可以看到其中包含哪些插件（可能还有其他预设）。如果您通过预设包含插件，则不必单独包含它。当您包含预设的 npm 包时，package.json 也是如此。

已弃用的提案预设系统

从第 0 阶段（只是一个想法）到第 3 阶段（候选），您拥有更接近标准化的插件集合。正因为如此，当你包含一个预设时，每个具有更高 stage-x 值的预设也被包括在内。这些预设中包含的插件在每个版本中都在不断变化，因为它们正在进行中，如果插件被拒绝，它们有可能会被删除。这就是你需要 transform-decorators-legacy 的原因，因为装饰器转译早先已从 Babel 中删除，尽管 they added it back later。