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

OnlyMyRailgun 发布于2019-08-23 15:37 / 3042人阅读

摘要：一背景最近项目里出现一个低版本浏览器里某个页面报错，。看到这个错误第一个反应是运用了关于新中的函数。如果想让这些方法运行，必须使用，为当前环境提供一个垫片。

一、背景

最近项目里出现一个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 浏览器版本数组处理

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/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