Webpack中core-js的使用

IE浏览器无法兼容es6语法,我们可以使用core-js进行兼容性处理,从而使IE浏览器也能够正常的解析es6语法

在这里插入图片描述
比如const
这个函数在Chrome中能够正常的执行
在这里插入图片描述
而在IE中则不能执行

在这里插入图片描述

使用core-js

首先需要安装core-js、babel-loader和@babel/preset-env @babel/core

npm i core-js babel-loader @babel/preset-env @babel/core  -D

然后在webpack.config.js中配置core-js

{   
                test:/\.js$/,
                exclude:/node_modules/,
                use:{
                    loader:'babel-loader',
                options:{
                    presets:[
                        [
                            '@babel/preset-env',
                            {
                                useBuiltIns:'usage',
                                corejs:{
                                //core-js的版本
                                    version:3
                                },
                                //需要兼容的浏览器
                                targets:{
                                    chrome:'60',
                                    firefox:'60',
                                    ie:'9',
                                    safari:'10',
                                    edge:'17'
                                }
                            }
                        ]
                    ]
                }
                }
                
            }

再次运行打包命令 core-js会帮我们自动进行兼容性处理
然后IE也能使用es6语法啦

在这里插入图片描述

  • 4
    点赞
  • 9
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值