标准的babel预设要求

Question

为了设置webpack + babel + react，我被告知需要在.babelrc中包含以下内容：

"presets": ["latest", "stage-0", "react"]

我想了解：为什么我要使用babel预设，除了babel本身，它们允许我做什么？这是一个问题。据我所读，在文档，preset-latest中，preset-es2015 + preset-es2016 + preset-es2017被组合起来。据我理解，这些是即将推出的ES版本的官方特性，而latest是选择不仅ES2015，而且所有未来版本的速记。规范不会改变，因此在生产中使用是足够稳定的。但是，stage-0，stage-1，stage-2，stage-3怎么样-它们代表的是即将推出的ECMAScript版本的非官方提案，还是代表其他什么？Babel文档没有明确说明。这是第二个问题。

最后，插件和预设有什么区别？

- ducin

---

文档似乎涵盖了大部分你的问题：“现在，Babel默认情况下不会做任何事情。它基本上像const babel = code => code;一样解析代码，然后再生成相同的代码。您需要添加一些插件才能让Babel执行任何操作（它们影响第二阶段，即转换）。预设不想组装自己的插件集？没问题！预设是可共享的.babelrc配置或仅仅是一个Babel插件数组。每个年度预设只编译当年批准的内容。使用preset-latest来转换所有年度预设。” - Felix Kling

“Stage-X（实验性预设）”中的任何变换都是对语言的更改，这些更改尚未获得Javascript版本发布的批准（例如ES6 / ES2015）。https://babeljs.io/docs/plugins/ - Felix Kling

相关：babel-preset-stage-0、babel-preset-stage-1等有什么区别？ - Felix Kling

Answer 1

一个Babel预设方便地定义了一组Babel插件，这样您就不必在.babelrc（或您声明配置的任何地方）下显式声明要使用它们中的每一个。看看es2016预设的源代码，您就会明白我的意思... 它只是导出了一个插件数组: https://github.com/babel/babel/blob/master/packages/babel-preset-es2016/src/index.js. 除了Babel本身，还有什么其他的呢？

Babel本身是其插件的接口。它利用一个兄弟程序babylon，这是acorn的一个分支，为插件提供了一种特定的解析、检查和操作程序源代码的方式，以根据您使用的插件添加所需的功能。

最后，插件和预设之间有什么区别？

如前所述，预设本身不包含任何功能，而是一个插件列表。这些通常代表某个相关的功能组。例如，stage-0预设将包含所有实现TC39定义的提交过程中处于零阶段的提案功能的插件。TC39是ECMAScript的“治理机构”。

您可能已经注意到，预设是一个JavaScript文件而不是JSON。这是因为预设定义的插件列表可以从配置中派生出来。例如，看一下env预设：https://github.com/babel/babel-preset-env/blob/master/src/index.js 但是关于stage-0、stage-1、stage-2、stage-3——它们代表的是还未正式发布的ECMAScript版本的非官方提案，还是其他什么意思呢？

没有“官方”提案。任何人都可以提交提案。但是如果您所说的官方是指该提案是否正在认真考虑，那么这取决于1）它在过程中处于哪个阶段和2）社区对其作为新功能的价值的普遍考虑。然而，即使在最后阶段，您也应该始终以谨慎的态度对待提案，因为我们曾经经历过Object#observe被在最后一刻取消的情况。

- sdgluck

Answer 2

我也不理解为什么要使用"modules": false，以及为什么有一个"env"设置，而且env有其自己的预设配置。

最后，我找到了这篇文章《我们的.babelrc文件中有什么？》，它很好地解释了这个问题，例如：

其次，我们将modules设置为false，以确保导入语句保持原样（而不是将它们转换为require语句）。我们这样做是为了让Webpack能够静态分析我们的代码，从而生成更高效的捆绑包。

最后，我们针对Jest进行了特定于环境的覆盖。Jest是我们选择的测试框架。由于Jest在node中运行，因此我们需要将我们的导入转换为requires，并针对我们当前正在使用的任何node运行时进行目标设置。

- Qiulang