关于ES6数组方法在低版本浏览器处理

栏目: JavaScript · 发布时间: 6年前

内容简介:最近项目里出现一个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、Symb

一、背景

最近项目里出现一个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有以下几种方式:

import 'babel-polyfill'

优点:

一次性解决所有兼容性问题,而且是全局的,浏览器的console也可以使用

缺点:

  1. 一次性引入了ES6+的所有polyfill, 打包后的js文件体积会偏大
  2. 对于现代的浏览器,有些不需要polyfill,造成流量浪费
  3. 污染了全局对象
  4. 不适合框架或库的开发

三、优化解决办法

方法一:polyfill.io

一个CDN方式提供的polyfill, 可根据浏览器UserAgent自动返回合适的polyfill

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

  1. packge.json引入依赖babel-preset-env
  2. .babelrc中使用配置preset-env
  3. 指定useBuiltins选项为true
  4. 指定浏览器环境或node环境, 配置需要兼容的浏览器列表

在webpack入口文件中使用import/require引入polyfill, 如import 'babel-polyfill'

以上配置完成之后, babel会根据指定的浏览器兼容列表自动引入所有所需的polyfill, 不管你代码中有没有使用


以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持 码农网

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

开发高质量PHP框架与应用的实际案例解析

开发高质量PHP框架与应用的实际案例解析

Sebastian Bergmann / 刘文瀚、刘海燕 / 清华大学出版社 / 2012-6 / 49.00元

PHP已经成为最受欢迎的编程语言之一,这使得用PHP创建高质量、易维护的应用程序和框架比以往受到更多的青睐。通过使用来自于知名公司的真实案例研究,《开发高质量PHP框架与应用的实际案例解析》为Web软件体系结构的不同层次介绍了规划、执行以及测试自动化方面的内容,并解释了这些公司如何测量和测试软件质量。《开发高质量PHP框架与应用的实际案例解析》作者Sebastian Bergmann、Stefan......一起来看看 《开发高质量PHP框架与应用的实际案例解析》 这本书的介绍吧!

RGB转16进制工具
RGB转16进制工具

RGB HEX 互转工具

MD5 加密
MD5 加密

MD5 加密工具

XML 在线格式化
XML 在线格式化

在线 XML 格式化压缩工具