关于babel:Babel-babelpolyfil

80次阅读

共计 954 个字符,预计需要花费 3 分钟才能阅读完成。

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";

链接:https://www.9xkd.com/

正文完
 0