煦涵说Webpack-IE低版本兼容指南
Webpack,Webpack 是一个前端资源加载/打包工具,现在版本已经 release 到 v2.6.1,今天的文章不直接介绍Webpack的API及使用,而是对最近项目开发中使用Webpack打包时处理IE低版本(IE8及以下)浏览器兼容问题做一次总结。
PC端项目前端基础技术选型jQuery + ES6 + EJS + Babel + Webpack:
- jQuery:提供选择器和ajax接口兼容支持;
- ES6:跟进前端趋势,方便向后兼容;
- EJS:提供前端模板引擎支持;
- Babel:提供 ES6 转码支持;
- Webpack: 提高前端资源加载/打包;
项目开发过程都在 Chrome 浏览器中,一切都OK,没有任何问题,当在IE9以下浏览器中调试发现好多坑,现总结如下,以后新手参考。
Case One: default
、 class
、catch
ES3中保留字问题
报错信息:
SCRIPT1048: 缺少标识符
对应代码:
e.n = function (t) {var n = t && t.__esModule ? function () {return t.default} : function () {return t};return e.d(n, "a", n), n }
网上查找资料,webpack有一款loader插件es3ify-loader来处理ES3的兼容问题,修改webpack配置,问题解决,添加规则如下:
module: {rules: [{test: /.js$/,enforce: 'post', // post-loader处理loader: 'es3ify-loader'}] }
这个loader是干啥用的捏,就是把这些保留字给你加上引号,使用字符串的形式引用,请看实例:
// 编译前 function(t) { return t.default; }// 编译后 function(t) { return t["default"]; }
Case Two: uglify-js产生问题
重新构建,在IE低版本浏览器预览,使用 webpack.optimize.UglifyJsPlugin
压缩时,又报上面同样的错误了,重新采用 beauty:true, build 发现引号被压缩掉了,究其原因,研究了下uglify-js默认配置,发现了 compress.properties
属性,增加build options如下,问题解决:
new webpack.optimize.UglifyJsPlugin({compress: {properties: false,warnings: false},output: {beautify: true},sourceMap: false })
Case Three: uglify-js问题
重新构建,在IE低版本浏览器预览,使用 webpack.optimize.UglifyJsPlugin
压缩时,又报上面同样的错误了,报错代码:
{catch: function (t) {return this.then(null, t)} }
继续查找uglify-js配置,发现 output.quote_keys
,修改build options,问题解决:
new webpack.optimize.UglifyJsPlugin({compress: {properties: false,warnings: false},output: {beautify: true,quote_keys: true},sourceMap: false }),
编译后:
{"catch": function(t) {return this.then(null, t);} }
Case Four: uglify-js问题
重新构建,在IE低版本浏览器预览,报错信息如下:
SCRIPT3126: 无法设置未定义或 null 引用的属性
继续分析压缩后代码,发现还是uglify-js问题,其mangle 配置属性 mangle.screw_ie8
默认为 true, 什么意思捏,意思就是把支持IE8的代码clear掉,screw you => 去你的,修改压缩配置项,重新编译,问题解决:
new webpack.optimize.UglifyJsPlugin({compress: {properties: false,warnings: false},output: {beautify: true,quote_keys: true},mangle: {screw_ie8: false},sourceMap: false })
Case Five: ES5的API兼容报错
在 webpack 的 entry 入口文件top引入 es5-shim
问题解决
require('es5-shim'); require('es5-shim/es5-sham');
Case Six: Console.log 问题
在 webpack 的 entry 入口文件top引入 console-polyfill
问题解决
require('console-polyfill');
Case Seven: Promise 兼容
在 webpack 的 entry 入口文件top引入 es6-promise
问题解决
require('es6-promise');
Case Eight: Object.defineProperty 问题
这个case 应该说是最难搞的一个case了,耗时也比较长,关键点在于使用 es5-shim
/es5-sham
也有问题,查看你官网发现在低版本浏览器也会有问题,官网描述如下:
Object.defineProperty
In the worst of circumstances, IE 8 provides a version of this method that only works on DOM objects. This sham will not be installed. The given version of defineProperty will throw an exception if used on non-DOM objects.
In slightly better circumstances, this method will silently fail to set "writable", "enumerable", and "configurable" properties.
Providing a getter or setter with "get" or "set" on a descriptor will silently fail on engines that lack "defineGetter" and "defineSetter", which include all versions of IE.
https://github.com/es-shims/es5-shim/issues#issue/5
那这个Object.defineProperty 是如何产生的呢,这个是babel编译后产生的,当我们在代码使用 import
export
ES6 Module时出现的,那你可能最直接的想法就是我不用ES6 Module了,改用Commonjs规范,OK,修改后编译,确实解决了问题,但是查看代码里还是有一段代码的,如下:
e.d = function(t, n, r) {e.o(t, n) || Object.defineProperty(t, n, {"configurable": !1,"enumerable": !0,"get": r}); }, e.n = function(t) {var n = t && t.__esModule ? function() {return t["default"];} : function() {return t;};return e.d(n, "a", n), n; }, e.o = function(t, e) {return Object.prototype.hasOwnProperty.call(t, e); }
看代码已经做了容错判断。
Case Nine: Object.defineProperty 问题
重新构建,加入 json3
处理 JSON 对象兼容时,代码在此处抛出了异常:
var hasGetter = 'get' in descriptor; var hasSetter = 'set' in descriptor; if (!supportsAccessors && (hasGetter || hasSetter)) {throw new TypeError(ERR_ACCESSORS_NOT_SUPPORTED); }
分析supportsAccessors代码逻辑:
var supportsAccessors = owns(prototypeOfObject, '__defineGetter__');
通过断点调试,supportsAccessors值为false且hasGetter或者hasSetter时抛出了异常,也就是说当前js引擎不支持访问器属性,却在属性描述符中设置了get,set,那么就会抛出异常。查看 defineGetter 的兼容情况,只兼容IE11,虽然IE9、IE10同样不支持defineGetter,不过他们直接支持Object.defineProperty方法和get语法,无需sham,所以代码并不会走到异常这里。但是IE8以下就扯淡了。解决这种情况只能修改源代码了。
至此,Webpack打包时,IE低版本浏览器(IE8及以下)遇到的兼容问题就总结这里,如果你有新的问题,欢迎留言。
感谢您的阅读
--eof--
作者[煦涵]
2017年05月28日
[center]
下面是「FED实验室」的微信公众号二维码,欢迎长按、扫描关注:
[/center]
煦涵说Webpack-IE低版本兼容指南相关推荐
- Webpack-IE低版本兼容指南
来源:https://github.com/zuojj/fedlab/issues/5 Webpack,Webpack 是一个前端资源加载/打包工具,现在版本已经 release 到 v2.6.1,今 ...
- Material Designer的低版本兼容实现(五)—— ActivityOptionsCompat
extends:http://www.cnblogs.com/tianzhijiexian/p/4087917.html 本文是对API中的方法做了介绍,如果想要看如何让这些方法兼容4.x或2.x可以 ...
- Material Designer的低版本兼容实现(一)—— 简介 目录
很长一段时间没写东西了,其实是因为最近在研究Material Designer这个东西,熬夜熬的身体也不是很好了.所以就偷懒没写东西,这回开的这个系列文章是讲如何将Material Designer在 ...
- 微信小程序、微信低版本兼容
基础库低版本兼容 小程序的功能不断的增加,但是旧版本的微信客户端并不支持新功能,所以在使用这些新能力的时候需要做兼容. 1版本号比较 js_getuserinfo() {// 4 13// 2.10. ...
- 安卓qq去小程序版本号与服务器不符,QQ小程序 低版本兼容
小程序的功能不断的增加,但是旧版本的QQ客户端并不支持新功能,所以在使用这些新能力的时候需要做兼容. 开发者可以通过以下方式进行低版本的兼容: 1. 版本号比较 QQ客户端和小程序基础库的版本号风格为 ...
- android 最低兼容版本,vue cli3 es6 安卓低版本 兼容问题
问题: 1.在测试在三星 安卓7.0版本中报错,其他手机可以,低版本安卓手机出现白屏,(注释:如果静态div是正常的如图) 报错内容: `[vue-router] Failed to resolve ...
- Material Designer的低版本兼容实现(十)—— CheckBox RadioButton
ChekBox的用途我们就不必多说了,算是一个很古老的控件了,何其类似的还有RadioButton,这个东西因为我目前还没写出来,所以用了别人的一个lib,这下面会说到.顺便说一句,如果你的app是在 ...
- oppo与vivo手机低版本兼容问题
最近在做H5页面嵌套app的项目,有几个问题在这里说明一下 1. 不要用es6语法,为什么呢?部分oppo与vivo手机不兼容es6语法,就比如箭头函数,let,const,如果部分手机页面什么都没有 ...
- 前端学习(1424):ajax低版本兼容问题
ajax.js // 引用expess框架 const express = require('express'); // 处理路径 const path = require('path');const ...
最新文章
- 64位十六进制转浮点数
- 3.产品成本在完工和在制产品间分配
- Java手机忘了密码怎么办_手机开机密码忘记了怎么办
- python中如何调用或修改元组中的元素_python 元组的使用方法
- 带有Python示例的math.sin()方法
- mysql创建全外连接的视图_关系型数据库 MySQL 表索引和视图详解
- 解决克隆clone github 仓库速度过慢的问题
- if函数python_python入门(if函数)
- 卫星协同观测的学习笔记
- 未来已来?揭开量子计算机的神秘面纱
- linux 命令 — 文件相关
- VS下更新Qt语言家ts文件没反应
- Shapefile简介
- PrintWriter out= response.getWriter()失效无法在前端弹出提示框以及乱码问题.
- java项目学生量化管理考核细则_班级管理量化考核细则范本
- EximiousSoft Logo Designer (Crack)版,轻松设计logo的软件
- Transform.LookAt解析
- xshell6的安装和使用
- Linux基础命令-大全
- 右键我的电脑无法打开计算机管理的解决方法
热门文章
- 人工智能 漆桂林_2020年CCF专委活动计划(预通过)
- Android websocket闪退,退出手机浏览器,websocket会自动关闭,不是长持续吗
- 电子技术基础(三)__电感的感抗_无功功率和电容的容抗_无功功率
- 小程序用户行为数据监测与分析以及案例分享
- Python爬虫QQ音乐数据采取,公开数据获取案例之一(1),腾讯Python开发面试记录
- ValueError: invalid mode: ‘W‘
- 卧槽,迅雷的代码结构被扒了精光
- MSCL超级工具类(C#),开发人员必备,开发利器
- 计算机网络技术期末复习考点
- 哔哩哔哩作者页上的作品批量保存的方法