babel-polyfill vs babel-plugins

Question

我在Babel选项/配置中有点迷失。我想使用最近的js功能并编译（使用webpack）浏览器代码。

babel-polyfill和babel plugins与babel-preset-env之间的区别是什么？

他们打算一起工作吗？

Answer 1

来自this article的答案：

  

babel transform plugin与babel-polyfill / babel-runtime之间的区别   Array.from 是否可以   今天重新实现该功能，在ES5中。例如，Array.from可以   在ES5中重写但是我无法在ES5中编写任何内容来添加   箭头函数语法到JavaScript。因此，有一个转变   对于箭头函数，但babel-polyfill没有。它必须是   由单独的polyfill提供，如babel-runtime，或   Babel。

作为旁注，这是我目前对巴贝尔生态系统的理解。

babel-polyfill是一个javascript编译器：解析，转换和输出已转换的代码。

巴别核

• 这是解析和输出部分。
• 它没有做任何改造。
• 可以从命令行或捆绑器（webpack，汇总和合作）使用它。

babel-polyfill / babel-runtime

• 通过在您的代码中添加es5 javascript以模拟 es2015 +函数（如Object.assign），对转换部分采取行动。
• 依靠Regenerator（向polyfill generators）和core-js（以填充所有其余部分）。
• babel-runtime和babel syntax / transform plugins之间的区别：前者定义全局方法（并污染全局范围），而后者转换代码以使explained in this answer具有相同的功能。

babel plugins

• 转换您编写的代码。
• babel-plugins-stage-x：解析并转换 es2015 +语法（如箭头功能），将其转换为es5。
• babel-plugins（从第0阶段到第4阶段）：转换未在JS规范中的未来javascript语法，从阶段0开始（只是一个想法）到第4阶段（将登陆在babel-preset-env很快）。

巴别预置-ENV

• target确定特定环境所需的Babel插件和polyfill。
• 如果没有配置，它将加载将es2015 +转换为es5所需的所有插件（包括es2015，es2016和es2017）。
• 使用builtIn选项，它只加载在特定目标上运行所需的插件。
• 使用babel-polyfill选项，它仅使用内置目标的babel-transform-runtime。
• 尚未与boolean collided(int x1, int y1, int r1, int x2, int y2, int r2) { return !(Math.sqrt((x1-x2)*(x1-x2) + (y1-y2)*(y1-y2))>(r1+r2)); } 合作（截至2017年11月）。 （见this issue）

Answer 2

babel-preset-env是一个Babel预设，旨在自动设置babel plugins，并根据针对babel polyfills检查的一组目标环境包含必要的feature compatibility table。

为了在非ES2015 +客户端上运行完全正常运行的ES2015 +环境，简单的代码转换有时是不够的：

使用regenerator库启用
• ES生成器（由 babel-polyfill提供）
• 缺少ES2015 +方法（例如Promise，Map，Object.assign ...）与core-js进行了多方填充（由提供） babel-polyfill ，也是）
• 标准的babel插件生成任何其他可传输功能，通常通过预先配置的babel-presets
使用

所以，回到你的问题，它使用 babel-polyfill 和 babel插件 babel-preset-env >