Webpack中core-js的使用


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

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

在这里插入图片描述

使用core-js

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

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

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
{  
                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语法啦

在这里插入图片描述