Babel @babel/polyfil
作者:知否
来源:SegmentFault 思否社区
Babel 中默认只转换新的 JavaScript 句法,例如箭头函数、扩展运算符等。但是不会转换新的 API,像是Set、Maps、Iterator、Generator 、Symbol、Reflect 等全局对象,以及一些定义在全局对象上的方法都不会进行转译。如果想使用这些新的对象和方法,则需要为当前环境提供一个 polyfill 垫片。
举一个例子,例如 ES6 在 Array 对象上有一个新增的 Array.from 方法,因为这个方法是全局对象上的方法,所以 Babel 就不会对这个方法进行转译。如果想让这个方法运行,就要使用 @babel/polyfill 为当前环境提供一个垫片。
安装@babel/polyfil
目前最常用的配合 Babel 一起使用的 polyfill 垫片就是 @babel/polyfil,通过改写全局 prototype 的方式实现,它会加载整个 polyfil,针对编译的代码中新的 API 进行处理,并且在代码中插入一些帮助函数,比较适合单独运行的项目。
安装命令如下所示:
$ npm install --save @babel/polyfil
安装好后我们可以在程序入口文件的顶部引用 @babel/polyfil::
require('@babel/polyfill')
[].findIndex('babel')
或者使用 ES6 的语法,使用 import 导入:
import '@babel/polyfill'
[].findIndex('babel')
babel-polyfill 解决了 Babel 不转换新 API 的问题,但是直接在代码中插入帮助函数,会导致污染了全局环境,并且不同的代码文件中包含重复的代码,导致编译后的代码体积变大。虽然这对于应用程序或命令行工具来说可能是好事,但如果已有代码打算发布为可以供其他人使用的库,或我们无法完全控制代码运行的环境,则会成为问题。
注意
需要注意的是从 Babel 7.4.0 开始,不再推荐使用 @babel/polyfill 包,而是直接使用 core-js/stable 和 regenerator-runtime/runtime,如下所示:
import "core-js/stable";
import "regenerator-runtime/runtime";


关注公众号:拾黑(shiheibook)了解更多
赞助链接:
关注数据与安全,洞悉企业级服务市场:https://www.ijiandao.com/
四季很好,只要有你,文娱排行榜:https://www.yaopaiming.com/
让资讯触达的更精准有趣:https://www.0xu.cn/

随时掌握互联网精彩
- 港币对人民币汇率2023年9月24日
- 中国城市元宇宙产业地图与中国工业元宇宙产业图谱于2022服贸会期间发布
- 倒计时一天,微软中国 · 启迪 · 合作伙伴大会明天见!
- 内蒙古通管局刘宝钧:抓好六方面工作促进数字经济高质量发展
- 美欧举行对华对话第二次高级别会议,涉及知识产权、经济胁迫等议题
- 中国电信唐珂:践行数字化转型战略,满足企业高质量发展需求
- 端午档电影票房突破4亿元;爱回收更新招股书,创始人IPO前减持;YouTube主页顶部不再接受政治及选举广告|Do早报
- Dell'Oro报告:全球宽带接入设备市场Q420同比增长3%
- 实在想不到有什么用,但好像有点用
- 官宣!前微软研发经理邹欣加入 CSDN 担任副总裁,CSDN 重磅招揽一流人才
- 低延迟的5G来了,云电脑普及就在眼前?
- 办公软件WPS Office 2019 For UOS下载