babel-polyfill vs babel-plugins

Question

我有点迷失在Babel选项/配置中。我想使用最近的js特性和编译(与webpack)的浏览器代码。

巴贝尔-聚脂和babel插件与babel-preset-env有什么区别？

他们打算一起工作吗？

Answer 1

来自这篇文章的答复：

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

顺便提一下，这是我目前对巴别尔生态系统的理解。

Babel是一个javascript编译器:它解析，转换，输出转换后的代码。

巴别尔芯

• 这是解析和输出部件。
• 它不做任何转换。
• 它可以从命令行使用，也可以从绑定器(webpack、rollup和co.)中使用。

babel-polyfill /babel-运行时

• 在转换部件上，将es5 javascript放在代码前面，以模拟es2015+函数(如Object.assign)。
• 依赖于再生器 (用于填充发电机)和核js (用于填充所有其余部分)。
• babel-polyfill和babel-runtime之间的区别:前者定义全局方法(并污染全局范围)，而后者则转换代码以使在这个答案中解释具有相同的功能。

babel插件

• Transform你写的代码。
• babel syntax / transform plugins：解析并转换es2015+语法(类似箭头函数)以将其转换为es5。
• babel-plugins-stage-x (从第0阶段到第4阶段)：转换JS规范中还没有的未来javascript语法，从第0阶段(只是一个想法)到第4阶段(即将进入babel-plugins )。

巴贝尔预设-env

• babel-preset-env确定特定环境所需的Babel插件和多填充。
• 在没有配置的情况下，它将加载将es2015+传输到es5所需的所有插件(包括es2016、es2016和es2017)。
• 使用target选项，它只加载在特定目标上运行所需的插件。
• 对于builtIn选项，它只使用没有内置在目标中的babel-polyfill。
• 目前还不适用于babel-transform-runtime (截至11月)。2017)。(见本期)

Answer 2

巴贝尔预设-env是一个Babel预置，用于自动设置babel插件，并根据一组对照特征兼容性表检查的目标环境包括必要的巴贝尔填充物。

为了使完全工作的ES2015+环境在非is 2015+ client上运行，简单的代码转换有时是不够的：

• 使用babel-polyfill)库(由提供)启用ES生成器
• 缺失ES2015+方法(如Promise、Map、Object.assign.)是用babel-polyfill，提供的核js填充的
• 任何其他跨溢出特性都是由标准babel插件生成的，通常使用的是预先配置的巴贝尔预置。

所以，回到你的问题上，是babel-preset-env利用了babel-polyfill和babel插件。