关于webpack4.x版本不兼容低版本浏览器问题IE,低版本chrome解决方案

前言,原本项目支持为Chrome60版本,那么我们项目是没有问题的,无奈,用户群突然需要使用低版本的chrome30版本的浏览器,这不一片空白,控制台的错误就出来了,很明显的ES6语法不兼容,可是让我郁闷且奇怪的是,分明用了babel,为何还会出现如此错误!

报错故障为 SyntaxError: Use of const in strict mode.

关于这个错误,主要还是ES6语法在低版本浏览器中不兼容,我在网络上百度查了各种问题,最终找到了靠谱的博客是这篇,给了我很大启发,在此基础上我进行对我的webpack-dev-server降级处理,又出现了这个错误

Cannot find module ‘webpack/bin/config-yargs’

这个错误出现的原因,就是由于我只对webpack-dev-server进行了降级处理,
又去百度中找到这么一篇讲解我大致看了下原因,然后按照他的操作操作了一个遍,非常完美的又出现了新的问题,在如此周折之下,我还是决定自己好好看看报错信息,将我的初始环境进行复原。

{
    
    
    "webpack": "^4.16.5",
    "webpack-bundle-analyzer": "2.13.1",
    "webpack-cli": "3.1.0",
    "webpack-dev-server": "^3.1.5",
    "webpack-merge": "4.1.4"
}

这是我的初始环境

  1. 下面开始说我的解决方案了,还是很感谢上面的两篇文章。
  2. npm run dev 执行 vue项目之后,我查看报错信息
  3. 修改webpack.base.conf.js 中 babel-loader项的配置
 {
    
    
                test: /\.js$/,
                loader: 'babel-loader?cacheDirectory',
                exclude: [resolve('src/vendor/H5Player/H5Player.js')],
                include: [
                    resolve('src'),
                    resolve('test'),
                    resolve('node_modules/webpack-dev-server/client'),
                    resolve('node_modules/element-ui/src'),
                    resolve('node_modules/element-ui/packages'),
                    resolve('node_modules/webpack/lib'),
                    resolve('node_modules/path-browserify/index.js')
                ],
            },

这里说增加项,关于element-ui,由于其内部也有不少ES6的语法存在,所以这里进行转es5处理,其次是由于webpack4.X版本会对打包过程中不对自身进行babel处理,导致报错,这里我都添加进行处理。

Cannot assign to read only property ‘exports’ of object

这里处理添加之后,node_modules/webpack/lib/RequestShortener.js 文件中报出这个错误,只是由于此处他混用了module.exports 与 import导致的错误,我们使用插件【transform-es2015-modules-commonjs】处理一下,
安装命令:npm install babel-plugin-transform-es2015-modules-commonjs -D
安装babel插件之后,我们再在我们的 .babelrc文件中添加配置

 "plugins": [
    "transform-vue-jsx",
    "transform-runtime",
    "transform-es2015-modules-commonjs"
  ],

到这里,我们已经把代码已经转为低版本浏览器可以运行,而不是一片空白页面了。

这里在插入下,当你的项目中使用了正则断言时,请注意IE浏览器是不支持的,此处建议修改普通方法实现。避免踩坑

猜你喜欢

转载自blog.csdn.net/weixin_39370315/article/details/103825109