babel-polyfill vs babel-plugins

Question

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

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

他们打算一起工作吗？

Answer 1

本文回答:

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

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

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

巴贝尔核心

• 这是解析和输出部分.
• 它没有做任何转变.
• 它可以从命令行或捆绑器(webpack,汇总和co.)使用.

babel-polyfill/babel-runtime

• 通过在代码中添加es5 javascript来模拟es2015 +函数(如Object.assign),对变换部分进行操作.
• 依赖Regenerator(到polyfill 生成器)和core-js(到所有其余的polyfill).
• babel-polyfill和之间的区别babel-runtime:前者定义全局方法(并污染全局范围),而后者转换代码以使相同的功能可用,如本答案中所述.

巴贝尔插件

• 转换您编写的代码.
• babel syntax / transform plugins:解析并转换es2015 +语法(如箭头函数)将其转换为es5.
• babel-plugins-stage-x(从第0阶段到第4阶段):转换未来JS规范中的未来javascript语法,从阶段0开始(只是一个想法)直到阶段4(将babel-plugins很快登陆).

巴别预置-ENV

• babel-preset-env 确定特定环境所需的Babel插件和polyfill.
• 没有配置,它将加载将es2015 +转换为es5所需的所有插件(包括es2015,es2016和es2017).
• 使用target选项,它仅加载在特定目标上运行所需的插件.
• 使用该builtIn选项,它仅使用babel-polyfill未内置于目标中的选项.
• 不工作babel-transform-runtime,但(截至2017年与nov.).(见本期)