我在Babel选项/配置方面有些迷惑。我想使用最新的JavaScript功能并将其编译(使用Webpack)为浏览器代码。
babel-polyfill和带有babel-preset-env
的Babel插件之间有什么区别?
它们是否打算一起使用?
我在Babel选项/配置方面有些迷惑。我想使用最新的JavaScript功能并将其编译(使用Webpack)为浏览器代码。
babel-polyfill和带有babel-preset-env
的Babel插件之间有什么区别?
它们是否打算一起使用?
以下是对该文章的回答:
babel transform plugin
和babel-polyfill / babel-runtime
之间的区别在于您是否可以使用ES5重新实现该功能。例如,Array.from
可以用ES5重写,但没有任何ES5代码可编写以添加JavaScript的箭头函数语法。因此,箭头函数需要进行转换,而Array.from
则不需要。它将由单独的polyfill提供,例如babel-polyfill
或babel-runtime
。
顺便说一下,这是我目前对babel生态系统的理解。
Babel
是一个javascript编译器:它解析、转换并输出所转换后的代码。
babel-polyfill
和babel-runtime
之间的区别:前者定义全局方法(并污染全局范围),而后者转换您的代码,使相同的功能可用,正如在此答案中所解释的那样。babel语法/转换插件
:解析和转换es2015+语法(如箭头函数)以将其转换为es5。babel-plugins-stage-x
(从stage-0到stage-4):转换未在JS规范中出现的未来javascript语法,从stage-0(仅是一个想法)到stage-4(即将出现在babel-plugins
中)。babel-preset-env
确定特定环境所需的Babel插件和填充内容。target
选项,它仅加载在特定目标上运行所需的插件。builtIn
选项,它仅使用未在目标中内置的babel-polyfill
。babel-transform-runtime
一起使用(截至2017年11月)。 (请参见此问题)babel-preset-env 是一个 Babel 预设,旨在根据一组目标环境与功能兼容性表进行比对,自动设置Babel插件并包含必要的Babel polyfills。
为了在非ES2015+客户端上运行完全工作的ES2015+环境,简单的代码转译有时是不够的:
Promise
,Map
,Object.assign
等)通过core-js进行填充(也由babel-polyfill提供)所以,回到你的问题,正是babel-preset-env利用了babel-polyfill和babel插件。