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

最新推荐文章于 2024-08-28 23:20:37 发布

星野-纯夏

最新推荐文章于 2024-08-28 23:20:37 发布

阅读量2.5k

点赞数 1

分类专栏：经验分享文章标签： vue vue.js javascript

本文链接：https://blog.csdn.net/weixin_39370315/article/details/103825109

版权

经验分享专栏收录该内容

15 篇文章 2 订阅

订阅专栏

前言，原本项目支持为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"
}

这是我的初始环境

下面开始说我的解决方案了，还是很感谢上面的两篇文章。
npm run dev 执行 vue项目之后，我查看报错信息
修改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浏览器是不支持的，此处建议修改普通方法实现。避免踩坑