js 兼容性处理

js 兼容性处理：babel-loader  @babel / core

npm install --save-dev babel-loader @babel/core

index.js 中，使用了箭头函数的语法，打包编译后同样也是箭头函数，这在 chrome中没有任何问题，正常输出7，但在 IE 中打开，会有语法错误，

 IE浏览器并不支持箭头函数语法，所以需要 用 babel 做兼容性处理，webpack中就是 babel-loader

1，基本 js 兼容性 处理：@babel / preset-env，只能转换基本语法，promise 高级语法不能转换

npm install --save-dev  @babel/preset-env 

const {resolve} = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')

module.exports={
    entry:'./src/index.js',
    output:{
        filename:'bundle.js',
        path:resolve(__dirname,'build')
    },
    module:{
        rules:[
            {
                test: /.js$/,  //js兼容性处理，用到babel-loader @babel/core
                exclude:/node_modules/,
                loader:'babel-loader',
                options: {
                    presets: ['@babel/preset-env'] //预设：指示babel做怎么样的兼容性处理(基本处理)
                }
            }
        ]
    },
    plugins:[
        new HtmlWebpackPlugin({
            template:'./src/index.html'
        })
    ],
    mode:'development'
}

IE 中正常打印：

  

　处理后的 bundle.js中，const 变成了var，箭头函数也变成了普通函数，将 es6以上的语法都处理为 es6以下的语法

    

　但不能解决 promise 等高级语法的兼容性问题：

　

　

2，全部 js 兼容性处理：@babel / polyfill，只要解决部分兼容性问题，却要将所有兼容性代码全部引入，体积太大

　　npm install --save-dev  @babel/polyfill 

　　直接在 index.js 中引入即可：

import '@babel/polyfill'
const add = (x, y) => {
  return x + y;
};
console.log(add(2, 5));

const p = new Promise((resolve,reject)=>{
  resolve('执行promise')
})
p.then(res=>{
  console.log(res)
})

　　webpack编译后，IE浏览器正常兼容 promise，但bundle.js 体积变化太大：

　　

　　

3，需要做兼容性处理的就做处理，按需加载，core-js

npm install --save-dev  core-js

const {resolve} = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')

module.exports={
    entry:'./src/index.js',
    output:{
        filename:'bundle.js',
        path:resolve(__dirname,'build')
    },
    module:{
        rules:[
            {
                test: /.js$/,  //js兼容性处理，用到babel-loader @babel/core
                exclude:/node_modules/,
                loader:'babel-loader',
                options: {
                    presets: [['@babel/preset-env', { //预设：指示babel做怎么样的兼容性处理(基本处理)
                        useBuiltIns: 'usage',   // 按需加载
                        corejs: {  // 指定core-js版本
                            version: 3
                        },             
                        targets: { // 指定兼容性做到哪个版本浏览器
                            chrome: '60',
                            firefox: '60',
                            ie: '9',
                            safari: '10',
                            edge: '17'
                        }
                    }]] 
                
                }
            }
        ]
    },
    plugins:[
        new HtmlWebpackPlugin({
            template:'./src/index.html'
        })
    ],
    mode:'development'
}

 打包后的文件轻了不少：