webpack--JS兼容性处理eslint

webpack–JS兼容性处理eslint

比如const 或者箭头函数这些es6的语法，低版本ie浏览器无法识别。需要配置JS的兼容性

1. 基本js兼容性处理–》@babel/preset-env

缺陷：只能转换基本语法，如promise不能转换。解决方案如下

2. 全部js兼容性处理–》@babel/polyfill

a: npm i @babel/polyfill -D
b: 在需要兼容的js文件中引入：
improt '@babel/polyfill‘ (把js 需要兼容的库，一次性全部引入)
c: webpack
缺陷：我只要解决部分兼容性问题，但是这个库是暴力的将所有兼容性代码全部引入，体积太大了。

3. 只做需要做兼容性处理的：按需加载—>core-js
   如果使用该按需加载的方案,就不能使用第二种方案.要把
   // improt '@babel/polyfill‘
   注释掉

js兼容性处理：
npm i bable-loader @bable/preset-env @bable/core -D

webpack.config.js

options:{
   rules:[
    test:/\.js$/,
    exclude:/node_modules/,
    loader:'bable-loader',
    options:{
    //预设：指示bable做什么样的兼容性处理
    presets:[ 
       ['@bable/preset-env',
         {
         //按需加载配置如下
         useBuiltIns:'usage',
         //指定core-js版本
         corejs:{
           version:3
         } ,
         // 指定兼容性做到哪个版本浏览器
         targets:{
            chrome:'60',
            firfox:'60',
            ie:'9',
            safari:'10',
            edge:'17'
            } 
         }
        ] 
      ]
    }
 ]
}