Webpack4+Babel7+ES6兼容IE8的示例分析-创新互联
这篇文章主要介绍Webpack4+Babel7+ES6兼容IE8的示例分析,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!
成都创新互联是一家专注于成都做网站、网站建设与策划设计,吴起网站建设哪家好?成都创新互联做网站,专注于网站建设10年,网设计领域的专业建站公司;建站业务涵盖:吴起等地区。吴起做网站价格咨询:028-86922220ES6兼容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')
以上是“Webpack4+Babel7+ES6兼容IE8的示例分析”这篇文章的所有内容,感谢各位的阅读!希望分享的内容对大家有帮助,更多相关知识,欢迎关注创新互联成都网站设计公司行业资讯频道!
另外有需要云服务器可以了解下创新互联scvps.cn,海内外云服务器15元起步,三天无理由+7*72小时售后在线,公司持有idc许可证,提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案,具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势,专为企业上云打造定制,能够满足用户丰富、多元化的应用场景需求。
新闻名称:Webpack4+Babel7+ES6兼容IE8的示例分析-创新互联
网页地址:http://myzitong.com/article/jgeos.html