對(duì)babel-transform-runtime,babel-polyfill的一些理解

babel 編譯時(shí)只轉(zhuǎn)換語(yǔ)法,幾乎可以編譯所有時(shí)新的 JavaScript 語(yǔ)法,但并不會(huì)轉(zhuǎn)化BOM里面不兼容的API
比如 Promise,Set,Symbol,Array.from,async 等等的一些API
這時(shí)候就需要 polyfill 來(lái)轉(zhuǎn)轉(zhuǎn)化這些API

babel 轉(zhuǎn)譯語(yǔ)法需要一些plugin
如 react,es2015,stage-0,stage-1等等
其中的 es2015 表示 babel會(huì)加載 es6 相關(guān)的編譯模塊,然后 stage-0 表示的是什么呢?
stage 系列集合了一些對(duì) es7 的草案支持的插件,由于是草案,所以作為插件的形式提供。

* stage-0 - Strawman: just an idea, possible Babel plugin.
* stage-1 - Proposal: this is worth working on.
* stage-2 - Draft: initial spec.
* stage-3 - Candidate: complete spec and initial browser implementations.
* stage-4 - Finished: will be added to the next yearly release.

stage 是向下兼容 0>1>2>3>4 所包含的插件數(shù)量依次減少

babel polyfill 有三種:

* babel-runtime
* babel-plugin-transform-runtime
* babel-polyfill

transform-runtime
在使用webpack打包時(shí),需配置到babel中

"plugins": [
        ["transform-runtime", {
                "helpers": false,
                "polyfill": false,
                "regenerator": true,
                "moduleName": "babel-runtime"
        }]
]

transform-runtime 會(huì)有幾個(gè)配置項(xiàng),不表標(biāo)注默認(rèn)為true

在webpack中,babel-plugin-transform-runtime 實(shí)際上是依賴babel-runtime
因?yàn)閎abel編譯es6到es5的過(guò)程中,babel-plugin-transform-runtime這個(gè)插件會(huì)自動(dòng)polyfill es5不支持的特性,
這些polyfill包就是在babel-runtime這個(gè)包里
core-js 、regenerator等 poiiyfill

babel-runtime和 babel-plugin-transform-runtime的區(qū)別是,相當(dāng)一前者是手動(dòng)擋而后者是自動(dòng)擋,每當(dāng)要轉(zhuǎn)譯一個(gè)api時(shí)都要手動(dòng)加上require('babel-runtime'),
而babel-plugin-transform-runtime會(huì)由工具自動(dòng)添加,主要的功能是為api提供沙箱的墊片方案,不會(huì)污染全局的api,因此適合用在第三方的開(kāi)發(fā)產(chǎn)品中。

runtime轉(zhuǎn)換器插件主要做了三件事:

* 當(dāng)你使用generators/async方法、函數(shù)時(shí)自動(dòng)調(diào)用babel-runtime/regenerator
* 當(dāng)你使用ES6 的Map或者內(nèi)置的東西時(shí)自動(dòng)調(diào)用babel-runtime/core-js
* 移除內(nèi)聯(lián)babel helpers并替換使用babel-runtime/helpers來(lái)替換

transform-runtime優(yōu)點(diǎn)

* 不會(huì)污染全局變量
* 多次使用只會(huì)打包一次
* 依賴統(tǒng)一按需引入,無(wú)重復(fù)引入,無(wú)多余引入

transform-runtime缺點(diǎn)

* 不支持實(shí)例化的方法Array.includes(x) 就不能轉(zhuǎn)化
* 如果使用的API用的次數(shù)不是很多,那么transform-runtime 引入polyfill的包會(huì)比不是transform-runtime 時(shí)大

總的來(lái)說(shuō)一句話,你可以使用內(nèi)置的一些東西例如Promise,Set,Symbol等,就像使用無(wú)縫的使用polyfill,來(lái)使用babel 特性,并且無(wú)全局污染、極高代碼庫(kù)適用性。
雖然這種方法的優(yōu)點(diǎn)是不會(huì)污染全局,但是,實(shí)例的方法,
Array.prototype.includes();

babel-polyfill
babel-polyfill則是通過(guò)改寫全局prototype的方式實(shí)現(xiàn),比較適合單獨(dú)運(yùn)行的項(xiàng)目。
開(kāi)啟babel-polyfill的方式,可以直接在代碼中require,或者在webpack的entry中添加,也可以在babel的env中設(shè)置useBuildins為true來(lái)開(kāi)啟。
但是babel-polyfill會(huì)有近100K,
打包后代碼冗余量比較大,
對(duì)于現(xiàn)代的瀏覽器,有些不需要polyfill,造成流量浪費(fèi)
污染了全局對(duì)象

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡(jiǎn)書(shū)系信息發(fā)布平臺(tái),僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容