.babelrc文件中插件和预设的区别

Question

情境

我有一个像这样的.babelrc文件：

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

问题

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

- totymedli

Answer 1

tl;dr

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

当您在package.json中包含npm软件包时也同样适用。

预设与插件

Babel有很多官方和第三方插件。预设是插件的集合，或者正如他们所说:

预设是可共享的.babelrc配置，或者简单地说是Babel插件的数组。

两者之间一个重要的区别是插件在预设之前加载。

预设的插件

最常见的预设是官方预设和已停止的实验性预设。

大多数官方预设包含插件来转译 EcmaScript 标准的功能，而实验性（stage-x）的预设包含转译将来仍在进行标准化工作的未来实验性功能的插件。自 Babel 7 开始，这些实验/建议预设已被弃用。 他们在博客文章中解释了原因。请阅读下面的部分以了解它们的工作方式。

当您单击预设时，可以查看其中包含的插件（和可能的其他预设）。如果通过预设包含插件，则无需单独包含它。当您包含预设的 npm packages 时，也是如此。

废弃的建议预设系统

从 stage 0（只是一个想法）到 stage 3（候选），您有一组插件，这些插件更接近于标准化。因此，当您包含预设时，每个高于 stage-x 的预设也会被包含在内。这些预设中包含的插件在每个版本中都在不断变化，因为它们是一项正在进行的工作，并且存在被拒绝的插件被删除的可能性。这就是为什么您需要 transform-decorators-legacy，因为装饰器转译先前已从 Babel 中移除，尽管 稍后又添加了它。

- totymedli