babel-polyfill 与 babel-plugins
babel-polyfill vs babel-plugins
我有点迷失在 Babel 选项/配置中。我想使用最近的 js 功能并（使用 webpack）编译为浏览器代码。
babel-polyfill and babel plugins和babel-preset-env有什么区别？
他们打算一起工作吗？
babel-preset-env is a Babel preset meant to automatically set up babel plugins and include the necessary babel polyfills based on a set of target environments checked against a feature compatibility table.
为了在 非 ES2015+ 客户端 上创建一个完全工作的 ES2015+ 环境 运行，简单的代码转换是有时不够：
- ES 生成器 使用 regenerator 库启用（由 babel-polyfill 提供）
- 缺少 ES2015+ 方法（如
Promise、Map、Object.assign...）用 core-js（也由 babel-polyfill 提供)
- 任何其他可传输的特性 由标准 babel 插件生成，通常通过预配置 babel-presets
使用
所以，回到你的问题，babel-preset-env 使用了 babel-polyfill 和 babel 插件.
来自this article的回答：
The distinction between a babel transform plugin versus
babel-polyfill / babel-runtime is whether or not you can
reimplement the feature today, in ES5. For example, Array.from can
be rewritten in ES5 but there is nothing I can write in ES5 to add
arrow function syntax to JavaScript. Therefore, there is a transform
for arrow functions but none for Array.from. It will have to be
provided by a separate polyfill like babel-polyfill, or
babel-runtime.
附带说明一下，这是我目前对 babel 生态系统的理解。
Babel 是一个 javascript 编译器：它 解析 、 转换 和 输出转换后的代码.
babel-核心
- 这是 parse 和 output 部分。
- 它不做任何转换。
- 可以从命令行或打包器（webpack、rollup 等）使用它
babel-polyfill / babel-运行时间
- 通过在代码中添加 es5 javascript 来模拟 es2015+ 函数（如 Object.assign).
- 依赖于Regenerator (to polyfill generators) and core-js（填充所有其余部分）。
babel-polyfill 和 babel-runtime 之间的区别：前者定义全局方法（并污染全局范围），而后者转换您的代码以提供与 相同的功能。
babel 插件
- 改造你写的代码。
babel syntax / transform plugins：解析并转换es2015+语法（类似箭头函数）将其转换为es5.babel-plugins-stage-x（从 stage-0 到 stage-4）：将未来的 javascript 语法转换为 JS 规范中还没有的语法，从 stage-0（只是一个想法）开始到阶段 4（即将登陆 babel-plugins）。
babel-preset-env
babel-preset-env 确定特定环境所需的 Babel 插件和 polyfill。- 无需配置，它会加载将es2015+转译为es5所需的所有插件（包括es2015、es2016和es2017）。
- 使用
target 选项，它只加载特定目标 运行 所需的插件。
- 使用
builtIn 选项时，它只使用 babel-polyfill 而不是 built-in 目标。
- 尚不适用于
babel-transform-runtime（截至 2017 年 11 月）。 （参见 this issue）
我有点迷失在 Babel 选项/配置中。我想使用最近的 js 功能并（使用 webpack）编译为浏览器代码。
babel-polyfill and babel plugins和babel-preset-env有什么区别？
他们打算一起工作吗？
babel-preset-env is a Babel preset meant to automatically set up babel plugins and include the necessary babel polyfills based on a set of target environments checked against a feature compatibility table.
为了在 非 ES2015+ 客户端 上创建一个完全工作的 ES2015+ 环境 运行，简单的代码转换是有时不够：
- ES 生成器 使用 regenerator 库启用（由 babel-polyfill 提供）
- 缺少 ES2015+ 方法（如
Promise、Map、Object.assign...）用 core-js（也由 babel-polyfill 提供) - 任何其他可传输的特性 由标准 babel 插件生成，通常通过预配置 babel-presets 使用
所以，回到你的问题，babel-preset-env 使用了 babel-polyfill 和 babel 插件.
来自this article的回答：
The distinction between a
babel transform pluginversusbabel-polyfill / babel-runtimeis whether or not you can reimplement the feature today, in ES5. For example,Array.fromcan be rewritten in ES5 but there is nothing I can write in ES5 to add arrow function syntax to JavaScript. Therefore, there is a transform for arrow functions but none forArray.from. It will have to be provided by a separate polyfill likebabel-polyfill, orbabel-runtime.
附带说明一下，这是我目前对 babel 生态系统的理解。
Babel 是一个 javascript 编译器：它 解析 、 转换 和 输出转换后的代码.
babel-核心
- 这是 parse 和 output 部分。
- 它不做任何转换。
- 可以从命令行或打包器（webpack、rollup 等）使用它
babel-polyfill / babel-运行时间
- 通过在代码中添加 es5 javascript 来模拟 es2015+ 函数（如 Object.assign).
- 依赖于Regenerator (to polyfill generators) and core-js（填充所有其余部分）。
babel-polyfill和babel-runtime之间的区别：前者定义全局方法（并污染全局范围），而后者转换您的代码以提供与
babel 插件
- 改造你写的代码。
babel syntax / transform plugins：解析并转换es2015+语法（类似箭头函数）将其转换为es5.babel-plugins-stage-x（从 stage-0 到 stage-4）：将未来的 javascript 语法转换为 JS 规范中还没有的语法，从 stage-0（只是一个想法）开始到阶段 4（即将登陆babel-plugins）。
babel-preset-env
babel-preset-env确定特定环境所需的 Babel 插件和 polyfill。- 无需配置，它会加载将es2015+转译为es5所需的所有插件（包括es2015、es2016和es2017）。
- 使用
target选项，它只加载特定目标 运行 所需的插件。 - 使用
builtIn选项时，它只使用babel-polyfill而不是 built-in 目标。 - 尚不适用于
babel-transform-runtime（截至 2017 年 11 月）。 （参见 this issue）