vue引入 "swiper": "^5.3.8",打包时报错Unexpected token: name «Dom7»

引入swiper

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

初始化图片轮播

    initImage() {
      const vm = this;
      const mySwiper = new Swiper('.swiper-container', {
        spaceBetween: 16,
        slidesPerView: 3,
        observer: true, // 修改swiper自己或子元素时,自动初始化swiper
        observeParents: true, // 修改swiper的父元素时,自动初始化swiper
        preventClicksPropagation: true,
        autoplay: {
          delay: 1500,
          disableOnInteraction: true,
        }, // 可选选项,自动滑动
        // 如果需要分页器
        pagination: {
          el: '.swiper-pagination',
          clickable: true,
        },
        // 如果需要前进后退按钮
        navigation: {
          nextEl: '.swiper-button-next',
          prevEl: '.swiper-button-prev',
        },
        // 滑到最后一个隐藏前进按钮
        on: {
          slideChangeTransitionEnd() {
            if (this.isEnd) {
                  this.navigation.$nextEl.addClass('hide');
            } else {
              this.navigation.$nextEl.removeClass('hide');
            }
          },
        },
      });
        // 鼠标覆盖停止自动切换
      mySwiper.el.onmouseover = function () {
        mySwiper.autoplay.stop();
        mySwiper.navigation.$nextEl.removeClass('hide');
        mySwiper.navigation.$prevEl.removeClass('hide');
      };
      // 鼠标离开开始自动切换
      mySwiper.el.onmouseout = function () {
        mySwiper.autoplay.start();
        mySwiper.navigation.$nextEl.addClass('hide');
        mySwiper.navigation.$prevEl.addClass('hide');
      };
    },

打包时报错

js/chunk-2e9a501f.85da2169.js from UglifyJs
Unexpected token: name «Dom7», expected: punc «;» [js/chunk-2e9a501f.85da2169.js:133,6]

我也会一脸懵逼,为什么终于要发版啦,打包出错,哭死,弱小无助,唯有度娘营救我,

UglifyJs 仅支持JavaScript(ECMAScript 5)。

怎么解决呢

   transpileDependencies: [
        "swiper",
        "dom7",
        "ssr-window"
    ],

transpileDependencies
Type: Array<string | RegExp>
Default: []
默认情况下 babel-loader 会忽略所有 node_modules 中的文件。如果你想要通过 Babel 显式转译一个依赖,可以在这个选项中列出来。
用来处理ES6语法,将其编译为浏览器可以执行的js语法。

结果

打包顺利,求大佬告知swiper内部封装了什么导致这个问题

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

友情链接更多精彩内容