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。