本文介绍如何使用webpack5处理JavaScript的兼容性问题，通过@babel/preset-env进行基本语法转换，并探讨了@babel/polyfill的暴力解决方法与core-js的按需引入策略。在实践中，@babel/polyfill会显著增加包的大小，而core-js则能实现更优化的资源利用率。
上一篇：【webpack5修行之道】第5篇：webpack对js语法检查
这篇我们来讲一讲webpack对js的兼容性处理。
我们使用babel-loader来处理js的兼容性问题，要使用babel-loader，需要安装： @babel/core和babel-loader
npm install -D babel-loader @babel-core修改webpack.config.js
添加babel-loader后，我们再去index.js里写一点高级的语法
写完以后我们编译： npm run build，然后去浏览器查看控制台，我们这里以chrome和ie为例，
先看chrome发现我们的高级语法已经正常输出了，如下图
然后我们去看一下IE呢，
我电脑上的IE是11，是支持的，这个时候我们 切换IE的版本，改为IE10以下。
正如我们所料，IE11以下不支持数组的reduce方法。
@babel/present-env
为了兼容这个语法，我们修改webpack.config.js，在babel-loader处加入presets设置，用@babel/preset-env来做一些常规的语法兼容
最低0.47元/天 解锁文章
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
