webpack 之 配置js代码兼容

因为es6语法不兼容部分浏览器,所以要对项目进行配置

1.安装依赖

npm install babel-loader @babel/preset-env @babel/core core-js -D //第一三方法安装这个
npm install  @babel/polyfill -D //第二个方法安装这个

2.三种方法兼容

(1)babel-loader @babel/preset-env @babel/core 兼容

       只能兼容基本的语法,但是像是promise语法,无法进行兼容

(2)兼容全部js语法  @babel/polyfill  

  在index.js中引入依赖即可

  import ‘@babel/polyfill‘

  缺点:全部兼容造成打包文件太大

(3)core-js 配合第一种进行按需兼容

3.配置详情(下面是将eslint检查与js兼容配置放在了一起,module中不可以对.js文件(同一种文件)进行多次匹配,多次匹配只会匹配第一个,所以要结合在一起)

{
                test:/\.js$/,
                exclude:/node_modules/,
                use:[
                    {
                        loader: eslint-loader,
                        options:{
                            fix:true//eslint自动修复格式错误
                        }
                    },
                    {//js兼容性处理:babel-loader @babel/preset-env @babel/core
                        loader: babel-loader,
                        options:{
                            //预设:指示babel做怎么样的兼容性处理
                            presets:[
                                [
                                    @babel/preset-env,
                                    {
                                        // 按需加载
                                        useBuiltIns: usage,
                                        // 指定core-js版本
                                        corejs: {
                                            version: 3,
                                        },
                                        // 指定兼容浏览器版本范围
                                        targets: {
                                            chrome: 70, // 谷歌版本70及以上
                                            firefox: 62,
                                            ie: 9,
                                            safari: 10,
                                            edge: 17,
                                        }
                                    }
                                ]
                            ]
                        }
                    }
                ]
            },

4.所以一般采用第一种加第三种组合进行.js文件兼容,也就是上面贴的代码。

第二种具体引入方式如下,不建议使用

{
      test:/\.js$/,
      exclude:/node_modules/,
      loader:babel-loader,
      options:{
           presets:[@babel/preset-env]
      }
}

 

webpack 之 配置js代码兼容

 

webpack 之 配置js代码兼容

上一篇:vue validate js


下一篇:Ajax六