babeljs - babel-polyfill 与 babel-plugins

Question

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

babel-polyfill和babel 插件有什么区别babel-preset-env？

他们打算一起工作吗？

Answer 1

这篇文章的答案：

babel transform plugina vs 之间的区别在于babel-polyfill / babel-runtime 您是否可以在 ES5 中重新实现该功能。例如，Array.from可以在 ES5 中重写，但我无法在 ES5 中编写任何东西来将箭头函数语法添加到 JavaScript。因此，箭头函数有一个变换，而Array.from. 它必须由单独的 polyfill 提供，例如babel-polyfill, 或 babel-runtime.

---

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

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

通天塔核心

• 这是解析和输出部分。
• 它不做任何转换。
• 它可以从命令行或捆绑器（webpack、rollup 和 co.）中使用。

babel-polyfill / babel-runtime

• 通过在代码中添加 es5 javascript 来模拟es2015+ 函数（如 Object.assign），对转换部分进行操作。
• 依赖Regenerator（用于填充生成器）和core-js（用于填充所有其余部分）。
• babel-polyfill和之间的区别：前者定义全局方法（并污染全局范围），而后者转换您的代码以提供与此答案babel-runtime中解释的相同的功能。

通天塔插件

• 转换您编写的代码。
• babel syntax / transform plugins：解析和转换es2015+ 语法（如箭头函数）以将其转换为 es5。
• babel-plugins-stage-x（从第 0 阶段到第 4 阶段）：将 JS 规范中尚未包含的未来 javascript 语法转换为第 0 阶段（只是一个想法）到第 4 阶段（babel-plugins很快就会出现）。

babel-preset-env

• babel-preset-env确定特定环境所需的 Babel 插件和 polyfill。
• 在没有配置的情况下，它将加载将 es2015+ 转换为 es5 所需的所有插件（包括 es2015、es2016 和 es2017）。
• 通过一个target选项，它只加载在特定目标上运行所需的插件。
• 使用该builtIn选项，它仅使用目标babel-polyfill中未内置的那些。
• 尚无法使用babel-transform-runtime（截至 2017 年 11 月）。（见本期）

Answer 2

babel-preset-env是一个 Babel 预设，旨在自动设置babel 插件，并根据一组根据功能兼容性表检查的目标环境包含必要的babel polyfill。

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

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

所以，回到你的问题，使用babel-polyfill和babel plugins的是babel-preset-env。