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ì)象