babeljs - babel-polyfill 与 babel-plugins

Question

我对 Babel 选项/配置有点迷失。我想使用最新的 js 功能并编译(使用 webpack)为浏览器代码。

babel-polyfill 和有什么区别和 babel plugins与 babel-preset-env 一起使用吗？

他们打算一起工作吗？

Answer 1

来自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-core

• 这是解析和输出部分。
• 它不进行任何转换。
• 它可以从命令行或 bundler (webpack、rollup 等)使用

babel-polyfill/babel-runtime

• 通过在代码中添加 es5 javascript 来模拟 es2015+ 函数(如 Object.assign)，对 transform 部分进行操作。
• 依赖Regenerator (填充 generators )和 core-js (以填充其余所有内容)。
• babel-polyfill 和 babel-runtime 之间的区别:前者定义全局方法(并污染全局范围)，而后者转换代码以实现相同的功能可用为 explained in this answer .

babel 插件

• 转换您编写的代码。
• babel 语法/转换插件:解析和转换 es2015+ 语法(如箭头函数)以将其转换为 es5。
• babel-plugins-stage-x (从 stage-0 到 stage-4):从 stage-0 开始(只是一个想法)，转换 JS 规范中尚未包含的 future javascript 语法)下降到第 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 月)。 (参见this issue)