對(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ò)改寫(xiě)全局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)系作者
  • 序言:七十年代末壤靶,一起剝皮案震驚了整個(gè)濱河市缚俏,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌贮乳,老刑警劉巖,帶你破解...
    沈念sama閱讀 221,198評(píng)論 6 514
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件恬惯,死亡現(xiàn)場(chǎng)離奇詭異向拆,居然都是意外死亡,警方通過(guò)查閱死者的電腦和手機(jī)酪耳,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 94,334評(píng)論 3 398
  • 文/潘曉璐 我一進(jìn)店門(mén)浓恳,熙熙樓的掌柜王于貴愁眉苦臉地迎上來(lái),“玉大人碗暗,你說(shuō)我怎么就攤上這事颈将。” “怎么了言疗?”我有些...
    開(kāi)封第一講書(shū)人閱讀 167,643評(píng)論 0 360
  • 文/不壞的土叔 我叫張陵晴圾,是天一觀的道長(zhǎng)。 經(jīng)常有香客問(wèn)我噪奄,道長(zhǎng)死姚,這世上最難降的妖魔是什么人乓? 我笑而不...
    開(kāi)封第一講書(shū)人閱讀 59,495評(píng)論 1 296
  • 正文 為了忘掉前任,我火速辦了婚禮都毒,結(jié)果婚禮上色罚,老公的妹妹穿的比我還像新娘。我一直安慰自己账劲,他們只是感情好戳护,可當(dāng)我...
    茶點(diǎn)故事閱讀 68,502評(píng)論 6 397
  • 文/花漫 我一把揭開(kāi)白布。 她就那樣靜靜地躺著瀑焦,像睡著了一般腌且。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上蝠猬,一...
    開(kāi)封第一講書(shū)人閱讀 52,156評(píng)論 1 308
  • 那天切蟋,我揣著相機(jī)與錄音,去河邊找鬼榆芦。 笑死柄粹,一個(gè)胖子當(dāng)著我的面吹牛,可吹牛的內(nèi)容都是我干的匆绣。 我是一名探鬼主播驻右,決...
    沈念sama閱讀 40,743評(píng)論 3 421
  • 文/蒼蘭香墨 我猛地睜開(kāi)眼,長(zhǎng)吁一口氣:“原來(lái)是場(chǎng)噩夢(mèng)啊……” “哼崎淳!你這毒婦竟也來(lái)了堪夭?” 一聲冷哼從身側(cè)響起,我...
    開(kāi)封第一講書(shū)人閱讀 39,659評(píng)論 0 276
  • 序言:老撾萬(wàn)榮一對(duì)情侶失蹤拣凹,失蹤者是張志新(化名)和其女友劉穎森爽,沒(méi)想到半個(gè)月后,有當(dāng)?shù)厝嗽跇?shù)林里發(fā)現(xiàn)了一具尸體嚣镜,經(jīng)...
    沈念sama閱讀 46,200評(píng)論 1 319
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡爬迟,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 38,282評(píng)論 3 340
  • 正文 我和宋清朗相戀三年,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了菊匿。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片付呕。...
    茶點(diǎn)故事閱讀 40,424評(píng)論 1 352
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡,死狀恐怖跌捆,靈堂內(nèi)的尸體忽然破棺而出徽职,到底是詐尸還是另有隱情,我是刑警寧澤佩厚,帶...
    沈念sama閱讀 36,107評(píng)論 5 349
  • 正文 年R本政府宣布姆钉,位于F島的核電站,受9級(jí)特大地震影響,放射性物質(zhì)發(fā)生泄漏育韩。R本人自食惡果不足惜克蚂,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 41,789評(píng)論 3 333
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望筋讨。 院中可真熱鬧埃叭,春花似錦、人聲如沸悉罕。這莊子的主人今日做“春日...
    開(kāi)封第一講書(shū)人閱讀 32,264評(píng)論 0 23
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽(yáng)壁袄。三九已至类早,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間嗜逻,已是汗流浹背涩僻。 一陣腳步聲響...
    開(kāi)封第一講書(shū)人閱讀 33,390評(píng)論 1 271
  • 我被黑心中介騙來(lái)泰國(guó)打工, 沒(méi)想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留栈顷,地道東北人逆日。 一個(gè)月前我還...
    沈念sama閱讀 48,798評(píng)論 3 376
  • 正文 我出身青樓,卻偏偏與公主長(zhǎng)得像萄凤,于是被迫代替她去往敵國(guó)和親室抽。 傳聞我的和親對(duì)象是個(gè)殘疾皇子,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 45,435評(píng)論 2 359

推薦閱讀更多精彩內(nèi)容