webpack使用swiper5时IE报错，chrome正常，有大佬遇到吗

Question

"swiper": "^5.1.0"

使用方式：

import Swiper from "swiper";
import "swiper/css/swiper.css";

new Swiper('.swiper-container1', options);

报错如下：

ERROR in static/js/1.a8e063dc2fbe83b00120.js from UglifyJs
Unexpected token: name «Dom7», expected: punc «;» [./node_modules/dom7/dist/dom7.modular.js:16,6][static/js/1.a8e063dc2fbe83b00120.js:19926,6]

Answer 1

怀疑：UglifyJs 不支持 ES6，用 Terser。

Answer 2

• 首先需要降级uglify-webpack-plugin到1.x版本
• 其次需要在babel-loader中include这个dom库，swiper5中的写法是es6的class写法

Answer 3

最近用vue-awesome-swiper有兼容ie需求遇到坑了，刚好对症，回来回答一下这个问题：

vue-awesome-swiper 4.x 依赖的是 swiper 5，源码用到了es6+语法，于是uglify-webpack-plugin不支持es6所以已经不能满足需求。
因此，使用现在主流的terser来替代解决这个问题。

然后ie10以上的时候可以走开头的流程了，只是到swiper这里就报语法错误了。

仔细查阅文档swiper 关于我们发现：

可以看出Swiper5不完全支持IE浏览器，得了呗，降级使用vue-awesome-swiper 3.x ，这个版本依赖的是swiper4.x。

然后再根据文档修改用到的api属性名

this.$refs.mySwiper.swiper // 语法有变化

结论：
该问题不关webpack的事，是swiper的事，降级到4.x即可