babel-polyfill vs babel-runtime

先說兩種方式的原理:

babel-polyfill,它不會(huì)將代碼編譯成低版本的ECMAScript,他的原理是當(dāng)運(yùn)行環(huán)境中并沒有實(shí)現(xiàn)的一些方法,babel-polyfill中會(huì)給做兼容

babel-runtime,將es6編譯成es5去運(yùn)行,前端可以使用es6的語法來寫,最終瀏覽器上運(yùn)行的是es5

優(yōu)缺點(diǎn):

babel-polyfill:通過向全局對象和內(nèi)置對象的prototype上添加方法來實(shí)現(xiàn),比如運(yùn)行環(huán)境中不支持Array-prototype.find,引入polyfill,前端就可以放心的在代碼里用es6的語法來寫;但是這樣會(huì)造成全局空間污染。比如像Array-prototype.find就不存在了,還會(huì)引起版本之前的沖突。不過即便是引入babel-polyfill,也不能全用,代碼量比較大。

babel-runtime:不會(huì)污染全局對象和內(nèi)置的對象原型。比如當(dāng)前運(yùn)行環(huán)境不支持promise,可以通過引入babel-runtime/core-js/promise來獲取promise,或者通過babel-plugin-transform-runtime自動(dòng)重寫你的promise。但是它不會(huì)模擬內(nèi)置對象原型上的方法,比如Array-prototype.find,就沒法支持了,如果運(yùn)行環(huán)境不支持es6,代碼里又使用了find方法,就會(huì)出錯(cuò),因?yàn)閑s5并沒有這個(gè)方法

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

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

  • 前言 半年前也寫過一篇babel的簡單使用文章,當(dāng)時(shí)看了下babel的文檔,但是很多地方還不理解,所以文章里沒有怎...
    mercurygear閱讀 46,329評論 9 100
  • 了解 Babel 各個(gè)模塊 本文所研究的是 babel 6 版本。babel 6 是 2015年10月30號 發(fā)布...
    shianqi閱讀 4,879評論 0 7
  • 用命令,可以查看你正在使用的Node環(huán)境對ES6的支持程度。 使用下面的命令,可以查看Node所有已經(jīng)實(shí)現(xiàn)的ES6...
    zcwfeng閱讀 808評論 0 2
  • 隨著時(shí)間的推移,瀏覽器對ES6支持度已經(jīng)越來越高了,超過90%的 ES6 語法特性都實(shí)現(xiàn)了。雖然有些瀏覽器對ES6...
    無亦情閱讀 2,806評論 0 6
  • 你可能已經(jīng)聽說過ECMAScript 6(簡稱 ES6)了。ES6 是 Javascript 的下一個(gè)版本,它有很...
    奮斗的小廢魚閱讀 806評論 0 16

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