详解Vue iview IE浏览器不兼容报错(Iview Bable polyfill)


Posted in Javascript onJanuary 07, 2019

由于Iview编译使用到了es6的一些新特性,Internet Explorer所有版本中都会报错,缺少includes、findIxdex等问题。

本人研究涉及到的环境:VueCli3.2 + iview 3.1.5

在IE中不支持ES6的新特性,例如:includes、findIndex……

以下方案可以解决该问题:

1.  Github iview仓储Issues中提到的

改编译范围请用 transpileDependencies: [‘iview'],不要用 include.add,因为默认配置里用了 exclude,在 webpack 中,多个条件同时存在时需要每个条件都满足才执行 rule。

但是加了这个选项后在所有浏览器里都会报错,因为 iView 里这个文件不兼容 ES Module。该文件是用很旧版本的 UMD 格式打包的,新版本 UMD 修复了报错的问题,但没有解决和 ES Module 互操作的问题。在 Webpack 4 中,ES Module 不能和 CommonJS / UMD 混用。

所以这里本质上是 iView 对 Webpack 4 支持的问题,让他们把源码全部转成 ES Module 就好了。
在vue.config.js中添加transpileDependencies: [‘iview']后,可以让bable编译过程中检查iview的代码,自动添加代码中用到的polyfill。

但是由于iview中有一个文件使用的UMD打包,所以编译后的代码还是在运行环境中报错,导致项目无法使用。

该方案虽然解决了ES6语法问题,但是实际使用会报错。

2.  直接给代码添加polyfill

修改bable.config.js使用 useBuiltIns: ‘entry'

module.exports = {presets: [ ['@vue/app', {useBuiltIns:'entry'} ] ]}

在Vue入口文件main中导入bable的polyfill

import'@babel/polyfill';

这种方案bable编译时,会自动导入目标浏览器(browserslist中配置)需要用到的polyfill,可以保证全局代码使用都可以新ES代码。但是,也许有些polyfill会一直用不到,额外增加了编译后的文件体积。

3.  使用balbe env,预置iview中所需要的polyfill(推荐做法)

修改bable.config.js 添加预导入的polyfill。目前我的项目中用到的polyfill有'es6.promise',‘es6.array.find-index',‘es7.array.includes',‘es6.string.includes'

module.exports = { presets: [ ['@vue/app', {
  debug:true,
  polyfills: [ 'es6.promise' , 'es6.array.find-index' , 'es7.array.includes' , 'es6.string.includes' ] 
 } ] ]}

这种方案依然使用Vue项目默认方案,不同的是在项目编译时,会导入polyfills中指定的polyfill,这样既可解决iview在ie中运行报错的问题。

上面中是我目前用到的几polyfill,如果需要其它铺垫,可以自行添加。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
理解Javascript_02_理解undefined和null
Oct 11 Javascript
将string解析为json的几种方式小结
Nov 11 Javascript
JavaScript高级程序设计 阅读笔记(十七) js事件
Aug 14 Javascript
javascript日期验证之输入日期大于等于当前日期
Dec 13 Javascript
图解js图片轮播效果
Dec 20 Javascript
jQuery中ajax的load()与post()方法实例详解
Jan 05 Javascript
15个值得开发人员关注的jQuery开发技巧和心得总结【经典收藏】
May 25 Javascript
Bootstrap表单简单实现代码
Mar 06 Javascript
Vue.js devtool插件安装后无法使用的解决办法
Nov 27 Javascript
使用gulp构建前端自动化的方法示例
Dec 25 Javascript
原生javascript运动函数的封装示例【匀速、抛物线、多属性的运动等】
Feb 23 Javascript
node.js如何根据URL返回指定的图片详解
Oct 21 Javascript
利用React Router4实现的服务端直出渲染(SSR)
Jan 07 #Javascript
Node.js EventEmmitter事件监听器用法实例分析
Jan 07 #Javascript
小程序二次贝塞尔曲线实现购物车商品曲线飞入效果
Jan 07 #Javascript
jQuery实现的别踩白块小游戏完整示例
Jan 07 #jQuery
jQuery判断自定义属性data-val用法示例
Jan 07 #jQuery
jQuery实现的简单歌词滚动功能示例
Jan 07 #jQuery
微信小程序发送短信验证码完整实例
Jan 07 #Javascript
You might like
php a simple smtp class
2007/11/26 PHP
PHP5 操作MySQL数据库基础代码
2009/09/29 PHP
Yii2实现自定义独立验证器的方法
2017/05/05 PHP
详解PHP中的 input属性(隐藏 只读 限制)
2017/08/14 PHP
PHP代码重构方法漫谈
2018/04/17 PHP
PHP中的自动加载操作实现方法详解
2019/08/06 PHP
在thinkphp5.0路径中实现去除index.php的方式
2019/10/16 PHP
用 JavaScript 迁移目录
2006/12/18 Javascript
FireFox下XML对象转化成字符串的解决方法
2011/12/09 Javascript
js判断选择的时间是否大于今天的代码
2013/08/20 Javascript
js日期相关函数总结分享
2013/10/15 Javascript
优化RequireJS项目的相关技巧总结
2015/07/01 Javascript
js实现仿爱微网两级导航菜单效果代码
2015/08/31 Javascript
JS填写银行卡号每隔4位数字加一个空格
2016/12/19 Javascript
Bootstrap源码解读排版(1)
2016/12/23 Javascript
node+express+ejs使用模版引擎做的一个示例demo
2017/09/18 Javascript
jquery radio 动态控制选中失效问题的解决方法
2018/02/28 jQuery
vue项目部署上线遇到的问题及解决方法
2018/06/10 Javascript
学习React中ref的两个demo示例
2018/08/14 Javascript
Js中使用正则表达式验证输入是否有特殊字符
2018/09/07 Javascript
nodejs实现日志读取、日志查找及日志刷新的方法分析
2019/05/20 NodeJs
Vue+Element实现表格编辑、删除、以及新增行的最优方法
2019/05/28 Javascript
jquery实现垂直手风琴导航栏
2020/02/18 jQuery
vue项目或网页上实现文字转换成语音播放功能
2020/06/09 Javascript
浅谈vue生命周期共有几个阶段?分别是什么?
2020/08/07 Javascript
windows下搭建python scrapy爬虫框架步骤
2018/12/23 Python
python数据处理——对pandas进行数据变频或插值实例
2020/04/22 Python
Python基于network模块制作电影人物关系图
2020/06/19 Python
CSS3点击按钮实现背景渐变动画效果
2016/10/19 HTML / CSS
奥地利网上现代灯具和灯饰店:Lampenwelt.at
2018/01/29 全球购物
领导的自我鉴定
2013/12/28 职场文书
兴趣小组活动总结
2014/05/05 职场文书
监考失职检讨书
2015/01/26 职场文书
法学专业求职信范文
2015/03/19 职场文书
法律意见书范本
2015/06/04 职场文书
看上去很美观后感
2015/06/10 职场文书