babel - 语法降级与Polyfill消灭低版本浏览器兼容问题

babel-preset-env

首先我们来理清楚这三个概念:

最新ES语法，比如：箭头函数，let/const，class, async await 。
最新ES Api，比如 Promise
最新ES实例/静态方法，比如String.prototype.include

babel-prest-env 仅仅只会转化最新的 es 语法，并不会转化对应的 API 和实例方法，比如说 ES6 中的 Array.from 静态方法。babel 是不会转译这个方法的，如果想在低版本浏览器中识别并且运行 Array.from 方法达到我们的预期就需要额外引入 polyfill 进行在 Array 上添加实现这个方法。

代码展示
dev1 ： 转换语法
dev2 ： 转换语法，使用 polyfill ( 按需加载 )
dev3 ： 转换语法，使用 polyfill ( 全部导入 ) node_modules 有高版本的第三方库时可以使用这种方式

无论是 entry 还是 usage 本质上都是通过注入浏览器不支持的 polyfill 在对应的全局对象上增加功能实现，这样无疑是会污染全局环境。

@babel/plugin-transform-runtime

1.自动移除语法转换后内联的辅助函数（inline Babel helpers），使用@babel/runtime/helpers里的辅助函数来替代；

2.当代码里使用了core-js的API，自动引入@babel/runtime-corejs3/core-js-stable/，以此来替代全局引入的core-js/stable;

3.当代码里使用了Generator/async函数，自动引入@babel/runtime/regenerator，以此来替代全局引入的regenerator-runtime/runtime；

代码展示
dev4 ：promise 等方法进行了重新定义

需要额外注意的是 @babel/plugin-transform-runtime 与环境无关，它并不会因为我们的页面的目标浏览器动态调整 polyfill 的内容，而 useBuiltIns 则会根据配置的目标浏览器而决定是否需要引入相应的 polyfill。

@babel/polyfill
@babel/runtime
@babel/runtime-corejs2
@babel/runtime-corejs3

从 Babel 7.4.0 开始，这个包已被弃用，转而直接包含core-js/stable（以填充 ECMAScript 功能）：

JavaScript
import “core-js/stable”;

如果您正在将生成器或异步函数编译为 ES5，并且您使用的是@babel/core或@babel/plugin-transform-regenerator更早版本7.18.0，则还必须加载该regenerator runtime包。@babel/preset-env当使用’suseBuiltIns: "usage"选项 或 @babel/plugin-transform-runtime时，它会自动加载regenerator runtime包。

事实上，core-js 有三种产物，别离是core-js、core-js-pure和core-js-bundle。第一种是全局 Polyfill 的做法，@babel/preset-env 就是用的这种产物；第二种不会把 Polyfill 注入到全局环境，能够按需引入；第三种是打包好的版本，蕴含所有的 Polyfill，不太罕用。@babel/runtime-corejs3 应用的是第二种产物。

@vitejs/plugin-legacy