如何使用Babel实现polyfill

babel是什么

babel官方文档中对babel有明确的定义：

Babel 是一个 JavaScript 编译器

Babel 是一个工具链，主要用于将采用 ECMAScript 2015+ 语法编写的代码转换为向后兼容的 JavaScript 语法，以便能够运行在当前和旧版本的浏览器或其他环境中。

当然babel已不仅仅用于转换ECMAScript 2015+ ，例如它还可以转换typescript、flow。

babel做的工作是

1. 将源代码解析为AST

2. 更改/转换AST

3. 打印AST(转换为源代码)

插件和preset

babel 本身不具有任何转化功能，它把转化的功能都分解到一个个 plugin 里面。因此当我们不配置任何插件时，经过 babel 的代码和输入是相同的。

插件

插件分两种：

• 语法插件
• 转换插件

【前端面试刷题网站：灵题库，收集大厂面试真题，相关知识点详细解析。】

前面已经提到，babel的插件实际做的工作是

1. 将源代码解析为AST

2. 更改/转换AST

3. 打印AST(转换为源代码)

语法插件做的工作就是第1步，将源代码解析为AST，而转换插件则是3步都要进行。因此如果已经配置了转换插件，就不需要再额外配置相应的语法插件。这一点官方文档中也有说明：

转换插件将启用相应的语法插件，因此你不必同时指定这两种插件。

预设

因为通常我们在项目中使用es2015代码转换或者react语法转换，会用到多个插件，如果一个一个配置，繁琐而且容易出错。预设就是用来解决这个问题的。

Babel 的预设（preset）可以被看作是一组 Babel 插件和/或 options 配置的可共享模块。\

常用的preset：preset-env，用来转换es2015，preset-react，用来转换jsx等，preset-typescript。

插件和预设的执行顺序

如果两个转换插件都将处理“程序（Program）”的某个代码片段，则将根据转换插件或 preset 的排列顺序依次执行。

• 插件在 Presets 前运行。

• 插件顺序从前往后排列。