babel-runtime VS babel-polyfill

最新推荐文章于 2024-06-13 10:28:08 发布

起晚的蜗牛

最新推荐文章于 2024-06-13 10:28:08 发布

阅读量535

点赞数

分类专栏：工具构建

本文链接：https://blog.csdn.net/hupian1989/article/details/89025986

版权

本文介绍了babel-polyfill和babel-runtime在模拟ES6+环境中的作用，对比了两者的实现方式和优缺点。babel-polyfill全局扩展实现全面但体积大，而babel-runtime采用隔离替换，不污染全局，更优雅但使用相对复杂。通过@babel/transform-runtime插件，babel-runtime可以优化转译过程，减少包尺寸，但不支持实例方法的替换。在最新版本中，babel已改进对实例方法的支持。

摘要由CSDN通过智能技术生成

随着ES标准的发展，相继出现了ES6，ES7，ES8，ES9等新特性。新特性的出现，可以很好的提高开发效率和开发者体验，受到前端开发者的喜爱。但是浏览器厂商对这些新特性的支持是存在时差的，各主流浏览器的支持程度也参差不齐了，同时用户端安装的浏览器版本也不可控。为保障产品的可运行性，同时兼顾开发者的体验，babel应运而生。 babel承担了将ES6+新特性转译为浏览器能识别的向后兼容的JS语法的职责。

架构上，babel把ES6+中的新特性划分为两类：新增语法（syntax）和新增API。语法的解析是js引擎的职责，开发者是不能自己定义，重写的。例如新增的 let，const，箭头函数等关键字在不支持的浏览器是不能使用的。新增API是开发者可以通过函数重写覆盖的，例如includes， map，promise等，开发者可以自己在项目里实现。babel对这两类新特性的处理进行了解耦，新增语法特性通过指定插件或预设直接转换，新增API特性通过代码层引入babel-polyfill或babel-runtime来实现向下兼容。

关系图

babel-polyfill和babel-runtime两者的关系图可总结如下：在功能上都是模拟了一个ES6+的环境，支持代码中使用新增API特性；在外部依赖上，有两个相同的核心依赖包。但在实现方式上两者区别很大，一个简单全面，另一个精致优雅，各有长短，适用不同的应用场景。

“我补全，你随意”简单全面的babel-polyfill

babel-polyfill通过在全局空间扩展对象，静态方法，原型链方法来实现ES6+环境的模拟，而这些扩展工作都封装在@babel/polyfill包内部，不会影响业务代码，即使是编译后的代码可读性也很好。使用时只需在dependencies下安装：npm install --save @babel/polyfill，同时在应用入口文件中引入import "@babel/polyfill"即可。

@babel/polyfill本身是一个简单的包，没有什么代码量，功能实现都依赖两个核心的第三方包corejs 和 regenerator-runtime。