山东百度微信小程序_Webpack4+Babel7+ES6兼容IE8的完成

发布时间:2021-01-07 14:45 作者:jianzhan

摘要: Webpack4+Babel7+ES6适配IE8的完成 本文关键详细介绍了Webpack4+Babel7+ES6适配IE8的完成,原文中根据实例编码详细介绍的十分详尽,对大伙儿的学习培训或是工作中具备一定的参照学习培训

Webpack4+Babel7+ES6兼容IE8的实现       这篇文章主要介绍了Webpack4+Babel7+ES6兼容IE8的实现,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧

前阵子重构了一个挺有意思的项目,是一个基于浏览器环境的数据采集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在各浏览器版本中的支持情况

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

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

、@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!');

总结

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: /(ponents)/,
 use: {
 loader: 'babel-loader',
 options: {
 presets: [
 '@babel/preset-env'
 plugins: [
 '@babel/plugin-transform-runtime'
 // 笔者为了兼容IE8才用了这个插件,代价是不能tree shaking
 // 没有IE8兼容需求的同学可以把这个插件去掉
 '@babel/plugin-monjs'
 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源码,笔者已将公司业务相关代码去除,将通用部分开源。

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


  • 石油化工行业网站建设解

    石油化工设备机器设备团队门户网网的建立,其目的之一在于建立起石油化工设备机器设备团队统一的宣传策划方案策划营销推广营销推广和信息内容內容发布门户网网,更重要的在于

  • 为何近期大伙儿都会做手

    原题目:为何近期大伙儿都会做手机微信微信小程序? 微信小程序早已被大部分人认知能力, 究竟什么叫微信小程序? “跳一跳”玩过吗? 想来大伙儿都会玩,就连小孩子也在玩。

  • KTV微信小程序必须什么作

    手机微信微信小程序日渐受欢迎,美容护肤美容制造行业都不想忽略这一出风口,竞相参加微信小程序开发设计。 那麼美容护肤美容制造行业开发设计手机微信微信小程序有哪些益处呢

  • 腾迅公布的六款手机微信

    模拟题目:腾讯发布的六款手机上手机微信手机微信微信小程序,你呢解多少钱个? 手机上手机微信手机微信微信小程序自发性性布迄今就十分受欢迎,它是一种无需完全免费免费下载

  • 手机微信小商店微信小程

    手机上手机微信小店铺手机微信微信小程序是手机上手机微信官方网网公布的一款彻底完全免费的商城系统系统软件手机微信微信小程序,但是手机上手机微信小店铺手机微信微信小程