8.js兼容性处理

/1.js简单兼容性处理：

缺点：只能转换基本愈发，如promise就不能转换

1.使用插件：

babel-loader @babel/core @babel/preset-env

2.安装插件：

cnpm i babel-loader @babel/core @babel/preset-env --save-dev

3.webpack配置：

  {    test: /\.js$/,
  exclude: /node_modules/,//用于不检查第三方库
  loader: 'babel-loader',
  options: {
  // 预设：指示babel做怎么样的兼容性处理，普通简单转换处理。
  presets: [ '@babel/preset-env'],
           }
   }

/2.js全部兼容性处理：

缺点：只要解决部分兼容性问题，但是所有兼容性代码全部引入，体积太大了

1.使用插件：

@babel/polyfill

2.安装插件：

npm install @babel/polyfill -D

3.在需要处理的js中加载该插件:

import '@babel/polyfill';

/3.js全部兼容性处理,按需加载：（最好写法）

1.使用插件：

core-js

2.安装插件：

npm install core-jsl -D

3.在需要处理的js中加载该插件:

    {
     test: /\.js$/,
      exclude: /node_modules/,
     loader: 'babel-loader',
options: {
    //1. 指示babel做怎么样的兼容性处理
    //presets: ['@babel/preset-env']

    //2. 预设：指示babel做怎么样的兼容性处理
    presets: [
        [
            '@babel/preset-env',
            {
                // 按需加载
                useBuiltIns: 'usage',
                // 指定core-js版本
                corejs: {
                    version: 3
                },
                // 指定兼容性做到哪个版本浏览器
                targets: {
                    chrome: '70',
                    firefox: '63',
                    ie: '9',
                    safari: '12',
                    edge: '19'
                }
            }
        ]
    ]
}
 }