关于ES6数组方法在低版本浏览器处理
一、背景
最近项目里出现一个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的<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'`
优点：
一次性解决所有兼容性问题,而且是全局的,浏览器的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, 不管你代码中有没有使用
相关推荐
82530995 2020-10-15
ruanhongbiao 2020-08-16
FEvivi 2020-06-16
FEvivi 2020-06-13
PANH 2020-06-12
zhongweinan 2020-06-10
PANH 2020-06-07
PANH 2020-06-01
82530995 2020-05-10
webfullStack 2020-04-26
zhongweinan 2020-04-24
FEvivi 2020-04-17
FEvivi 2020-04-15
zhongweinan 2020-03-03
zhongweinan 2020-02-21
PANH 2020-02-19
PANH 2020-01-23
zhongweinan 2020-01-21
上海彭彭 2020-01-14