Webpack4+Babel7+ES6兼容IE8的实现


Posted in Javascript onApril 10, 2019

前阵子重构了一个挺有意思的项目,是一个基于浏览器环境的数据采集sdk。公司各个产品的前端页面中都嵌入了这个sdk,用于采集用户的行为数据,上传到公司的大数据平台,为后续的运营决策分析提供数据支撑。

笔者接手这个项目的时候,前任开发者已经把功能都写差不多了。唯一需要做的就是做下模块化拆分和代码规范,以便后续的开发维护。模块化拆分用webpack,代码规范用eslint。既然要重构,那就顺手用es6重写吧。callback也不要了,全换成promise,async、await也用起来,反正怎么爽怎么写。

问PM浏览器最低兼容到哪个版本,PM说兼容公司各个产品所兼容的最低版本就行。和公司各个产品的前端负责人沟通后发现,居然有兼容IE8的,真是我了个fk。

google了一下Webpack+Babel+ES6兼容IE8,果然坑很多。试了好几篇博客给出的方案,都跑不通。也没怎么研究具体哪里有问题,因为那些解决方案里面的webpack和babel都是旧版的,跑通了也不高兴用。笔者分析了那些博客中提出的几个关键性问题,然后参考webpack和babel最新的官方文档,总结出一套最新的Webpack4+Babel7+ES6兼容IE8的方案。

ES6兼容IE8需要解决四个问题

语法支持

IE浏览器不支持ES6的语法,只在IE10、IE11中支持了部分ES6的API,所以在IE浏览器中使用ES6需要把ES6的代码编译成ES5才能执行。方法也很简单,就是用babel-loader。这部分没什么坑,所以我也就不细说了。给个网站,大家可以自行查看ES5、ES6在各浏览器版本中的支持情况

https://kangax.github.io/compat-table/es6/

ES3保留关键字

如果在IE8下通过object.propertyName的方式使用ES3中的保留关键字(比如default、class、catch),就会报错

SCRIPT1048: 缺少标识符

webpack有一款loader插件es3ify-loader专门用来处理ES3的关键字兼容问题。这个插件的作用就是把这些保留字给你加上引号,使用字符串的形式引用。

// 编译前
function(t) { return t.default; }

// 编译后
function(t) { return t["default"]; }

然而,笔者亲身实践后发现,UglifyJS本来就已经提供了对IE浏览器的支持,不需要额外引入es3ify-loader。webpack默认的UglifyJS配置不支持ie8,需要手动配下。

{
 mode: 'production',
 optimization: {
  minimizer: [
   new UglifyJsPlugin({
    uglifyOptions: {
     ie8: true
    }
   })
  ]
 }
}

执行环境

解决了前面两个问题只能保证语法上不报错,但使用ES6中的API(比如Promise)还是会报错。另外,IE8对ES5的API支持也很差,只支持了少量的API,有些API还只是支持部分功能(比如Object.defineProperty)。所以,要在IE8中完美运行ES6的代码,不仅需要填充ES6的API,还要填充ES5的API。

babel为此提供了两种解决方案: @babel/polyfill、@babel/runtime。具体使用方法官方文档已经写的很详细了,笔者就不赘述了。这里纠正墨白同学文中的一个错误,就是@babel/polyfill现在已经支持按需加载,准确的说也不能算是错误,因为墨白同学在写这篇文章的时候还不支持按需加载。具体方法我就不细说了,文档里都有,配置下browserlist和@babel/preset-env的useBuiltsIns属性就可以了。

我只说下我在实际开发过程中碰到的坑。

虽然@babel/polyfill、@babel/runtime都支持按需加载,但都只能识别出业务代码中使用到的缺失的API,如果第三方库有用到这些缺失的API,babel不能识别出来,自然也就不能填充进来。比如regenerator-runtime中用到的Object.create和Array.prototype.forEach。解决办法是,在入口文件处手动引入缺失的API。

模块化加载

笔者原来是想用ES6的模块化加载方案,因为这样可以利用webpack的tree shaking,移除冗余代码,使打包出来的文件体积更小。但在IE8下测试发现Object.defineProperty会报错'Accessors not supported!'。报错代码如下

if ('get' in Attributes || 'set' in Attributes) throw TypeError('Accessors not supported!');

我用@babel/plugin-transform-modules-commonjs转成commonjs加载就可以把这个坑绕过去,但同时也意味着放弃了tree shaking。

总结

package.json

{
 "devDependencies": {
  "@babel/core": "^7.2.2",
  "@babel/plugin-transform-runtime": "^7.2.0",
  "@babel/preset-env": "^7.1.0",
  "@babel/runtime": "^7.3.4",
  "babel-loader": "^8.0.4",
  "core-js": "^3.0.1",
  "uglifyjs-webpack-plugin": "^2.0.1",
  "webpack": "^4.20.2",
  "webpack-cli": "^3.1.2",
  "webpack-dev-server": "^3.1.9",
  "webpack-merge": "^4.1.4"
 }
}

webpack配置

{
 module: {
  rules: [
   {
    test: /\.js$/,
    exclude: /(node_modules|bower_components)/,
    use: {
     loader: 'babel-loader',
     options: {
      presets: [
       '@babel/preset-env'
      ],
      plugins: [
       [
        '@babel/plugin-transform-runtime'
       ],
       [
        // 笔者为了兼容IE8才用了这个插件,代价是不能tree shaking
        // 没有IE8兼容需求的同学可以把这个插件去掉
        '@babel/plugin-transform-modules-commonjs'
       ]
      ]
     }
    }
   }
  ]
 },
 optimization: {
  minimizer: [
   new UglifyJsPlugin({
    sourceMap: true,
    uglifyOptions: {
     ie8: true,
    }
   })
  ]
 }
}

入口文件按需引入缺失的API

require('core-js/features/object/define-property')
require('core-js/features/object/create')
require('core-js/features/object/assign')
require('core-js/features/array/for-each')
require('core-js/features/array/index-of')
require('core-js/features/function/bind')
require('core-js/features/promise')

最后附上文章开头提到的sdk源码,笔者已将公司业务相关代码去除,将通用部分开源。https://github.com/xtTech/dc-sdk-js

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

Javascript 相关文章推荐
JQuery中$之选择器用法介绍
Apr 05 Javascript
js内存泄露的几种情况详细探讨
May 31 Javascript
Jquery uploadify图片上传插件无法上传的解决方法
Dec 16 Javascript
js获取IP地址的方法小结
Jul 01 Javascript
JavaScript判断按钮被点击的方法
Dec 13 Javascript
JS操作COOKIE实现备忘记录的方法
Apr 01 Javascript
浅谈Angular文字折叠展开组件的原理分析
Nov 24 Javascript
webpack 单独打包指定JS文件的方法
Feb 22 Javascript
Vue2.0 实现移动端图片上传功能
May 30 Javascript
使用layer弹窗提交表单时判断表单是否输入为空的例子
Sep 26 Javascript
通过实例了解JS执行上下文运行原理
Jun 17 Javascript
Vue 列表页带参数进详情页的操作(router-link)
Nov 13 Javascript
微信小程序第三方框架对比 之 wepy / mpvue / taro
Apr 10 #Javascript
用node撸一个监测复联4开售短信提醒的实现代码
Apr 10 #Javascript
从0到1搭建Element的后台框架的方法步骤
Apr 10 #Javascript
详解vue.js移动端配置flexible.js及注意事项
Apr 10 #Javascript
小程序分享模块超级详解(推荐)
Apr 10 #Javascript
关于JavaScript 数组你应该知道的事情(推荐)
Apr 10 #Javascript
Vue中computed、methods与watch的区别总结
Apr 10 #Javascript
You might like
php邮件发送,php发送邮件的类
2011/03/24 PHP
php解压文件代码实现php在线解压
2014/02/13 PHP
Laravel 4 初级教程之Pages、表单验证
2014/10/30 PHP
php生成年月日下载列表的方法
2015/04/24 PHP
全面了解PHP中的全局变量
2016/06/17 PHP
PHP获取真实IP及IP模拟方法解析
2020/11/24 PHP
MacOS下PHP7.1升级到PHP7.4.15的方法
2021/02/22 PHP
限制文本字节数js代码
2007/03/06 Javascript
编写自己的jQuery插件简单实现代码
2011/04/19 Javascript
node.js中的fs.close方法使用说明
2014/12/17 Javascript
jQuery实现转动随机数抽奖效果的方法
2015/05/21 Javascript
JavaSciprt中处理字符串之sup()方法的使用教程
2015/06/08 Javascript
在Vue中使用Compass的方法
2018/03/02 Javascript
Element Dialog对话框的使用示例
2020/07/26 Javascript
解决Antd 里面的select 选择框联动触发的问题
2020/10/24 Javascript
[46:42]DOTA2-DPC中国联赛正赛 Aster vs Magma BO3 第二场 3月5日
2021/03/11 DOTA
kNN算法python实现和简单数字识别的方法
2014/11/18 Python
python实现自动更换ip的方法
2015/05/05 Python
Python实现二叉堆
2016/02/03 Python
请不要重复犯我在学习Python和Linux系统上的错误
2016/12/12 Python
Python程序员面试题 你必须提前准备!
2018/01/16 Python
TensorFlow深度学习之卷积神经网络CNN
2018/03/09 Python
Python使用sort和class实现的多级排序功能示例
2018/08/15 Python
详解pandas中利用DataFrame对象的.loc[]、.iloc[]方法抽取数据
2020/12/13 Python
Django用内置方法实现简单搜索功能的方法
2020/12/18 Python
使用spring mvc+localResizeIMG实现HTML5端图片压缩上传的功能
2016/12/16 HTML / CSS
经典c++面试题二
2015/08/14 面试题
体育专业个人的求职信范文
2013/09/21 职场文书
小学开学典礼主持词
2014/03/19 职场文书
保护环境倡议书100字
2014/05/19 职场文书
促销活动总结怎么写
2014/06/25 职场文书
教师党员个人整改措施材料
2014/09/16 职场文书
电信营业员岗位职责
2015/04/14 职场文书
2016八一建军节慰问信
2015/11/30 职场文书
2016优秀班主任个人先进事迹材料
2016/02/26 职场文书
幼儿园2016年感恩节活动总结
2016/04/01 职场文书