babel-polyfill与babel-plugins的区别

Question

我在Babel选项/配置方面有些迷惑。我想使用最新的JavaScript功能并将其编译（使用Webpack）为浏览器代码。

babel-polyfill和带有babel-preset-env的Babel插件之间有什么区别？

它们是否打算一起使用？

- François Romain

Answer 1

以下是对该文章的回答：

babel transform plugin和babel-polyfill / babel-runtime之间的区别在于您是否可以使用ES5重新实现该功能。例如，Array.from可以用ES5重写，但没有任何ES5代码可编写以添加JavaScript的箭头函数语法。因此，箭头函数需要进行转换，而Array.from则不需要。它将由单独的polyfill提供，例如babel-polyfill或babel-runtime。

---

顺便说一下，这是我目前对babel生态系统的理解。

Babel是一个javascript编译器：它解析、转换并输出所转换后的代码。

babel-core

• 这是解析和输出的部分。
• 它不进行任何转换。
• 它可以从命令行或打包工具（如webpack、rollup等）中使用。

babel-polyfill / babel-runtime

• 通过在您的代码中添加es5 javascript来模拟es2015+函数（例如Object.assign），从而在转换部分上发挥作用。
• 依赖于 Regenerator（用于填充生成器）和core-js（用于填充其余的所有内容）。
• babel-polyfill和babel-runtime之间的区别:前者定义全局方法（并污染全局范围），而后者转换您的代码，使相同的功能可用，正如在此答案中所解释的那样。

babel插件

• 转换您编写的代码。
• babel语法/转换插件:解析和转换es2015+语法（如箭头函数）以将其转换为es5。
• babel-plugins-stage-x（从stage-0到stage-4）:转换未在JS规范中出现的未来javascript语法，从stage-0（仅是一个想法）到stage-4（即将出现在babel-plugins中）。

babel-preset-env

• babel-preset-env确定特定环境所需的Babel插件和填充内容。
• 无需配置，它将加载所有插件（包括es2015、es2016和es2017），以将es2015+转译为es5。
• 通过target选项，它仅加载在特定目标上运行所需的插件。
• 使用builtIn选项，它仅使用未在目标中内置的babel-polyfill。
• 目前不支持与babel-transform-runtime一起使用（截至2017年11月）。 （请参见此问题）

- François Romain

---

你想更新这个答案吗？毕竟我们已经到了2021年了。我在网上搜索了很久，发现很少有高度组织的答案，所以我认为保持你的答案最新确实可以帮助更多像我一样的人。 - VimNing

babel-polyfill / babel-runtime > 通过在 ES5 JavaScript 中添加前缀，您是什么意思说“prepending”？ - VimNing

Answer 2

babel-preset-env 是一个 Babel 预设，旨在根据一组目标环境与功能兼容性表进行比对，自动设置Babel插件并包含必要的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插件。

- Andrea Carraro

---

好的，谢谢。那么polyfill和stage插件有什么区别？ - François Romain

谢谢你的回答（我点了赞）。这确实有所帮助，但我仍然感到困惑...所以我阅读了关于那个主题的内容，并写下了自己的答案来总结我所理解的。 - François Romain