js 兼容性处理

Posted 2020-12-09 shanlu

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\'
}

 打包后的文件轻了不少：