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 相关文章推荐
不提示直接关闭网页窗口的JS示例代码
Dec 17 Javascript
input链接页面、打开新网页等等的具体实现
Dec 30 Javascript
javascript正则匹配汉字、数字、字母、下划线
Apr 10 Javascript
javascript实现禁止复制网页内容
Dec 16 Javascript
Bootstrap每天必学之按钮(Button)插件
Apr 25 Javascript
AngularJs表单验证实例代码解析
Nov 29 Javascript
bootstrap table配置参数例子
Jan 05 Javascript
JS实现百度搜索接口及链接功能实例代码
Feb 02 Javascript
vue使用v-if v-show页面闪烁,div闪现的解决方法
Oct 12 Javascript
node crawler如何添加promise支持
Feb 01 Javascript
javascript设计模式 ? 享元模式原理与用法实例分析
Apr 15 Javascript
angular4实现带搜索的下拉框
Mar 25 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页面间传递参数实例代码
2008/06/05 PHP
PHP中使用smarty生成静态文件的例子
2014/04/24 PHP
mod_php、FastCGI、PHP-FPM等PHP运行方式对比
2015/07/02 PHP
PHP实现笛卡尔积算法的实例讲解
2019/12/22 PHP
php 多进程编程父进程的阻塞与非阻塞实例分析
2020/02/22 PHP
30分钟就入门的正则表达式基础教程
2013/02/25 Javascript
利用Jquery实现可多选的下拉框
2014/02/21 Javascript
node+express+jade制作简单网站指南
2014/11/26 Javascript
JavaScript中消除闭包的一般方法介绍
2015/03/16 Javascript
Javascript 是你的高阶函数(高级应用)
2015/06/15 Javascript
跟我学习javascript的全局变量
2015/11/16 Javascript
AngularJS自动表单验证
2016/02/01 Javascript
vue监听滚动事件实现滚动监听
2017/04/11 Javascript
JavaScript屏蔽Backspace键的实现代码
2017/11/02 Javascript
JavaScript中的this/call/apply/bind的使用及区别
2020/03/06 Javascript
js实现无缝轮播图
2020/03/09 Javascript
JavaScript设计模式--简单工厂模式实例分析【XHR工厂案例】
2020/05/23 Javascript
vue实现评价星星功能
2020/06/30 Javascript
JavaScript实现鼠标移入随机变换颜色
2020/11/24 Javascript
js实现扫雷源代码
2020/11/27 Javascript
Python的加密模块md5、sha、crypt使用实例
2014/09/28 Python
使用Python轻松完成垃圾分类(基于图像识别)
2019/07/09 Python
python判断一个对象是否可迭代的例子
2019/07/22 Python
Python之Class&Object用法详解
2019/12/25 Python
基于Python 的语音重采样函数解析
2020/07/06 Python
HTML5实现文件断点续传的方法
2017/01/04 HTML / CSS
什么是Linux虚拟文件系统VFS
2015/08/25 面试题
书法培训心得体会
2014/01/05 职场文书
暖通工程师岗位职责
2014/06/12 职场文书
团队会宣传标语
2014/10/09 职场文书
文化苦旅读书笔记
2015/06/29 职场文书
安全生产感想
2015/08/07 职场文书
准备去美国留学,那么大学申请文书应该怎么写?
2019/08/12 职场文书
Windows 64位 安装 mysql 8.0.28 图文教程
2022/04/19 MySQL
Tomcat配置访问日志和线程数
2022/05/06 Servers
如何使用注解方式实现 Redis 分布式锁
2022/07/23 Redis