關于ES6數組方法在低版本瀏覽器處理

OnlyMyRailgun 發布于2019-08-23 15:37 / 3043人閱讀

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

一、背景

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

二、全局babel-polyfill

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

多帶帶在html的標簽中引入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"`

優點：

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

缺點：

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

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

污染了全局對象

不適合框架或庫的開發

三、優化解決辦法 方法一：polyfill.io

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

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

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

.babelrc中使用配置preset-env

指定useBuiltins選項為true

指定瀏覽器環境或node環境, 配置需要兼容的瀏覽器列表

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

云服務器 GPU云服務器關于c語言數組的代碼版本瀏覽器 webrtc 瀏覽器版本數組處理

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/102327.html

【深度長文】JavaScript數組所有API全解密

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

Mr_zhang 2019-08-20 16:13 評論0 收藏0
ES6 + Webpack + React + Babel 如何在低版本瀏覽器上愉快的玩耍（上）

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

you_De 2019-08-20 11:06 評論0 收藏0
前端常用代碼片段(四)

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

worldligang 2019-08-23 14:41 評論0 收藏0
ES6 + Webpack + React + Babel 如何在低版本瀏覽器上愉快的玩耍（下）

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

Freelander 2019-08-20 11:06 評論0 收藏0
babel學習筆記

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

Aomine 2019-08-21 17:18 評論0 收藏0