成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

關(guān)于ES6數(shù)組方法在低版本瀏覽器處理

OnlyMyRailgun / 3054人閱讀

摘要：一背景最近項目里出現(xiàn)一個低版本瀏覽器里某個頁面報錯，。看到這個錯誤第一個反應(yīng)是運用了關(guān)于新中的函數(shù)。如果想讓這些方法運行，必須使用，為當(dāng)前環(huán)境提供一個墊片。

一、背景

最近項目里出現(xiàn)一個bug,低版本瀏覽器里某個頁面報錯，Uncaught TypeError: Object [object Array] ha no method "find"。
看到這個錯誤第一個反應(yīng)是運用了ES6關(guān)于Array新API中的find函數(shù)。但是細想了下，明明用了Bable,為啥不能編譯為ES5。經(jīng)過搜索資料找到了原因，Babel 默認只轉(zhuǎn)碼 ES6 的新語法（syntax），而不轉(zhuǎn)換新的 API，比如 Iterator、Generator、Set、Maps、Proxy、Reflect、Symbol、Promise 等全局對象，以及一些定義在全局對象上的方法（比如 Object.assign、Array.from）都不會轉(zhuǎn)碼。如果想讓這些方法運行，必須使用 babel-polyfill，為當(dāng)前環(huán)境提供一個墊片。

二、全局babel-polyfill

使用babel-polyfill有以下幾種方式：

多帶帶在html的標(biāo)簽中引入babel-polyfill.js(CDN或本地文件均可)

在package.json中添加babel-polyfill依賴, 在webpack配置文件增加入口: 如entry: ["babel-polyfill","./src/app.js"], polyfill將會被打包進這個入口文件中, 而且是放在文件最開始的地方

在package.json中添加babel-polyfill依賴, 在webpack入口文件頂部使用import/require引入,如import "babel-polyfill"`

優(yōu)點：

一次性解決所有兼容性問題,而且是全局的,瀏覽器的console也可以使用

缺點：

一次性引入了ES6+的所有polyfill, 打包后的js文件體積會偏大

對于現(xiàn)代的瀏覽器,有些不需要polyfill,造成流量浪費

污染了全局對象

不適合框架或庫的開發(fā)

三、優(yōu)化解決辦法 方法一：polyfill.io

一個CDN方式提供的polyfill, 可根據(jù)瀏覽器UserAgent自動返回合適的polyfill

方法二：全局babel-polyfill(使用babel-preset-env插件和useBuiltIns屬性)

packge.json引入依賴babel-preset-env

.babelrc中使用配置preset-env

指定useBuiltins選項為true

指定瀏覽器環(huán)境或node環(huán)境, 配置需要兼容的瀏覽器列表

在webpack入口文件中使用import/require引入polyfill, 如import "babel-polyfill"
以上配置完成之后, babel會根據(jù)指定的瀏覽器兼容列表自動引入所有所需的polyfill, 不管你代碼中有沒有使用

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/102327.html

相關(guān)文章

  • 【深度長文】JavaScript數(shù)組所有API全解密

    摘要：關(guān)于我的博客掘金專欄路易斯專欄原文鏈接深度長文數(shù)組全解密全文共字，系統(tǒng)講解了數(shù)組的各種特性和。構(gòu)造器構(gòu)造器用于創(chuàng)建一個新的數(shù)組。中聲明的數(shù)組，它的構(gòu)造函數(shù)是中的對象。 本文首發(fā)于CSDN網(wǎng)站，下面的版本又經(jīng)過進一步的修訂。 關(guān)于 我的博客：louis blog 掘金專欄：路易斯專欄 原文鏈接：【深度長文】JavaScript數(shù)組全解密 全文共13k+字，系統(tǒng)講解了JavaScrip...

    Mr_zhang 評論0 收藏0

  • ES6 + Webpack + React + Babel 如何在低版本瀏覽器上愉快的玩耍（上）

    摘要：起因某天，某測試說這個頁面在下白屏，也白。。某前端開發(fā)吭哧吭哧。。。一上午的時間就過去了，搞定了。第二天，某測試說又白了。。某前端開發(fā)吭哧吭哧。。。誰用的，出來我保證削不屎你。原諒我不禁又黑了一把。 起因 某天，某測試說：這個頁面在 IE8 下白屏，9也白。。 某前端開發(fā): 吭哧吭哧。。。一上午的時間就過去了，搞定了。 第二天，某測試說：IE 又白了。。 某前端開發(fā): 吭哧吭哧。。。誰...

    you_De 評論0 收藏0

  • 前端常用代碼片段(四)

    摘要：盡量避免使用表達式又稱動態(tài)屬性。使用計算數(shù)組中的重復(fù)項如果你想計算數(shù)組中的每個值有多少重復(fù)值，也可以快速幫到你。 前端常用代碼片段(一) 點這里前端常用代碼片段(二) 點這里前端常用代碼片段(三) 點這里前端常用代碼片段(四) 點這里前端常用代碼片段(五) 點這里前端常用代碼片段(六) 點這里 1.簡述一下你對HTML語義化的理解？并寫出一段語義化的HTML？ 語義化是指根據(jù)內(nèi)容的結(jié)...

    worldligang 評論0 收藏0

  • ES6 + Webpack + React + Babel 如何在低版本瀏覽器上愉快的玩耍（下）

    摘要：在上篇，我們主要拋出了兩個問題，并給出了第一個問題的解決方案。沒有的實例方法可以采用方案三委屈下。放棄模式，放棄上篇中提到了開啟了模式來解決低版本瀏覽器無法繼承到在構(gòu)造函數(shù)里定義的屬性或方法。 回顧 起因： 某天，某測試說：這個頁面在 IE8 下白屏，9也白。。某前端開發(fā): 吭哧吭哧。。。一上午的時間就過去了，搞定了。第二天，某測試說：IE 又白了。。某前端開發(fā): 嘿咻嘿咻。。。誰用的...

    Freelander 評論0 收藏0

  • babel學(xué)習(xí)筆記

    摘要：經(jīng)過一番折騰，總算是把自己項目里的配置調(diào)整好了，所有文件從原來的縮小到。折騰了不少時間，改動其實就一個地方，就是配置文件，記錄一下自己折騰的過程。本以為那這兩種方式取其一就行了。這感覺和想象中的不一樣啊，說好的一個搞定一切的呢。。。 先是看到前端早讀課【第1065期】再見，babel-preset-2015，聽說現(xiàn)在有了babel-preset-env，別的什么preset都不需要了，...

    Aomine 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<