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

時間 2019-11-05

原文原文鏈接

1、背景

最近項目裏出現一個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，爲當前環境提供一個墊片。html

2、全局babel-polyfill

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

單獨在html的<head>標籤中引入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'`